JiSoo's Devlog

props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법 컴포넌트는 어떤 JSX를 반환하는 함수 ReactJS에서 스타일 적용하는 방법 중 가장 기본적으로 할 수 있는 방법은 태그 내의 style 변경하는 것 -> 이 방법이 최적 X 모든 컴포넌트들은 괄호로 인자를 받는데 이 인자 이름을 props라고 부른다 Btn({text:"Save Changes"}) 아래처럼 적은 게 위의 코드 같은 의미 ReactJS는 자동으로 우리가 넣은 모든 prop들을 object 안으로 집어넣고 오브젝트는 컴포넌트의 첫 번째 인자로 주어진다 props는 첫 번째이자 유일한 인자 function Btn(props) { console.log(props); return ( {props.text} );..

state는 기본적으로 데이터가 저장되는 곳 countUp을 호출할 때마다 ReactDOM.render부분을 다시 호출하고 싶은 것인데 먼저 애플리케이션이 시작될 때 Container를 렌더링 하고 우리가 Container를 렌더링 할 때 counter는 0 const root = document.getElementById("root"); let counter = 0; function countUp() { counter += 1; render(); } function render() { ReactDOM.render(, root); } function Container() { return ( Total clicks: {counter} Click me ); } render(); 우리가 해야 하는 건 Cont..

React JS는 UI를 interactive하게 만들어 준다 React JS를 설치하기 위해서는 두 개의 JavaScript 코드를 import 해야 한다 -> react, react-dom ReactJS의 규칙 중 하나는 HTML을 페이지에 직접 작성하지 않고 JavaScript와 ReactJS를 이용해 element 생성 react-dom은 모든 React element들을 HTML body에 들 수 있게 해 준다 ReactDOM.render()은 react element를 HTML로 만들어 배치 React.createElement("span", {span의 property}, “span 내용”) property는 classname, id 가능, style도 가능 바닐라 JS에서는 HTML -> J..

양식 개발자 시각에서 폼은 폼과 그 입력 때문에 넓고 다양한 상태를 나타낼 수 있어 굉장히 복잡할 수 있다 하나 이상의 입력 값이 모두 유효하지 않을 수도 있으며 모두 유효할 수도 있고 심지어는 서버로 리퀘스트를 보낸 뒤에 특정 값이 사용 가능한지 확인해야 하는 비동기 유효성 검사를 이용해야 해서 상태를 알 수 없을 수도 있다 input 요소에서 포커스를 잃었을 때 입력값의 유효성을 검증하는 경우에 좋은 점은 전체 폼이 제출되고 경고 메시지를 보내기 전에 사용자가 유효한 값을 입력할 수 있다는 것이다 양식 제출 처리 및 사용자 입력 값 가져오기 사용자 입력을 가져오는 방법에는 크게 두 가지가 있는데 모든 키 입력마다 확인하며 이 값들을 어떤 상태 변수에 저장할 수 있고 ref를 이용해 사용자가 값을 모두..

'커스텀 훅'이란? 안에 상태를 설정할 수 있는 로직을 포함한 함수 커스텀 훅을 만들어서 재사용 가능한 함수에 상태를 설정하는 로직을 아웃소싱할 수 있다 정규 함수와는 다르게 커스텀 혹은 다른 커스텀 훅을 포함한 다른 리액트 훅을 사용할 수 있다 useState나 useReducer를 통해 관리하는 리액트 상태를 활용할 수 있다 커스텀 훅을 통해 다른 컴포넌트에서 사용할 수 있는 로직을 커스텀 훅으로 아웃소싱할 수 있으며, 이를 통해 다양한 컴포넌트에서 호출이 가능하다 로직 재사용이 가능한 메커니즘 정규 함수와 특수 함수의 관계와 같이 커스텀 훅 함수에서는 리액트 훅과 다른 훅을 사용할 수 있다 커스텀 리액트 컴포넌트 Re-Evaluation Hook 함수 생성하기 별도의 함수에 이러한 공통 로직을 아웃..

데이터베이스에 연결하지 않는 방법 리액트 앱이나 일반적인 브라우저 앱에서는 브라우저에서 실행되는 자바스크립트 코드가 데이터베이스와 직접 통신하면 절대 안 된다 데이터베이스를 데이터베이스 서버에서 실행하는 것은 문제가 안되지만 앱으로 직접 데이터를 가져오거나 저장하고 연결을 맺는 행위는 외부 환경에서 절대 해서는 안 되는 일이다 데이터베이스에 직접 접근하는 것은 성능 문제와 같은 다른 문제를 발생시킬 수 있지만 그 무엇보다 보안 이슈 사항이 가장 큰 문제이다 리액트 앱은 일반적으로 해당 백엔드 서버, 또는 백엔드 API라고 불리는 서로 다른 URL로의 요청을 전송하는 서버와 통신하게 된다 GET 요청 보내기 자바스크립트 내에서 HTTP 요청을 전송하는 내장 메커니즘이 있는데 Fetch API라고 한다 Fe..

퍼스트 클래스 기반 컴포넌트 추가하기 render() 메소드는 리액트에 필요한 특정 메소드로 리액트가 jsx 코드 안에 컴포넌트가 사용된 것을 확인하면 그때 호출하는 메소드 클래스 기반 컴포넌트에서 render() 메소드는 props를 받지 않는다 import { Component } from 'react'; import classes from './User.module.css'; class User extends Component{ render(){ return {this.props.name}; } } // const User = (props) => { // return {props.name}; // }; export default User; State 및 이벤트 작업하기 import { Compone..

리액트가 실제로 작동하는 방식 리액트는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리 리액트는 컴포넌트를 통해 사용자 인터페이스를 효과적으로 구성하며 이에 대한 업데이트 역시 컴포넌트를 통해 한다 리액트 DOM은 웹에 대한 인터페이스 리액트는 변경된 내용과 어떤 화면이든 간에 화면에 표시되어야 할 정보 모두를 현재 사용 중인 인터페이스에 전달한다 리액트 DOM은 브라우저의 일부인 실제 DOM에 대한 작업을 하므로 사용자가 보고 있는 화면에 무언가를 표시하는 역할은 리액트 DOM의 몫이다 상태가 업데이트되면 이 정보를 리액트 DOM으로 전달되어 갱신 전후의 상태 차이를 인식하고 리액트가 컴포넌트 트리를 통해 구성한 가상 스냅샷인 가상 DOM과 일치하도록 실제 DOM을 조작하는 방법을 알 수 있게 한..

"Side Effects"란? 애플리케이션에서 일어나는 다른 모든 것을 뜻한다 예를 들면 http 리퀘스트를 보내는 것, 브라우저 저장소에 무언가를 저장하는 것, 코드에서 타이머나 간격 설정 즉 일반적인 컴포넌트 함수 밖에서 일어나는 일 useEffect 훅 -> 두 개의 매개변수, 두 개의 인수와 같이 호출된다 첫 번째 인수는 함수로 지정된 의존성이 변경된 경우라면 모든 컴포넌트 평가 후에 실행되어야 하는 함수이다 두 번째 인수로는 지정된 의존성을 넣어줘야 하는데 이것은 의존성으로 구성된 배열이다 의존성이 변경될 때마다 첫 번째 함수가 다시 실행된다 첫 번째 함수에 어떤 사이드 이펙트 코드라도 넣을 수 있는데 그러면 그 코드는 우리가 지정한 의존성이 변경된 경우에만 실행되고 컴포넌트가 다시 렌더링 될 ..

JSX 제한 사항 및 해결 방법 루트 수준에서 JSX 효소들이 인접해 있으면 오류 발생 일반적으로 JSX에서 루트 JSX 요소는 1개여야 한다 값을 반환하거나 값을 변수 또는 속성에 저장하려면 그 값은 반드시 JSX 요소 1개여야 한다 인접한 요소들을 div나 사용자가 정의한 컴포넌트로 감싸면 된다 div 사용하는 대신 네이티브 자바스크립트 배열을 사용할 수도 있다 -> 키 지정 키 프롭은 우리가 만든 값으로 추가할 수도 있다 실제 DOM으로 렌더링 될 때 리액트 컴포넌트가 많이 중첩될 수 있는데 그 모든 컴포넌트들은 여러 이유로 div로 감싸거나 다른 감싸는 컴포넌트가 필요하다 너무 많은 html 요소를 렌더링 하면 궁극적으로 애플리케이션이 느려질 것이다 컴포넌트 감싸기(wrapper) 만들기 칠드런 ..