준비 우리가 리액트를 사용하는 이유는 간단하다. 바로 싱글 페이지 애플리케이션(SPA)이 웹 개발에서 매우 효율적이기 때문이다. SPA가 무엇인지 간단히 설명하자면 원래 사이트 간 이동을 할 때 새로고침 하듯이 깜박거리며 사이트가 이동하는 게 일반적이었다. 하지만, 이는 속도나 서버 가성비 측면에서 매우 비효율적인 방법이었고, 이를 극복하기 위해 리액트같은 프레임워크가 등장하면서 사이트 이동 시 필요한 부분만 효율적으로 받아서 출력하는 방식으로 바뀌게 된 것이다. $ npm install react-router-dom --save 앞에서 말한 SPA를 만들기 위해서 React Router라는 라이브러리를 먼저 설치해주어야 한다. 방법 컴포넌트 경로 설정하기 import {BrowserRouter, Rou..

What App.js - List.js - Item.js의 순서대로 자식 컴포넌트가 있다고 가정해보자. 즉, App.js가 최상위 부모 컴포넌트고 그 밑으로는 List.js, 또 그 밑으로는 Item.js 컴포넌트가 있는 것이다. 만약, App 컴포넌트의 state를 Item 컴포넌트에게 전달하려면 어떻게 해야할까? 기존의 일반적인 방법으로는 App이 List 컴포넌트에게 props를 먼저 전달하고, 전달받은 props를 다시 Item 컴포넌트로 전달하는 과정을 거쳐야 했다. List 컴포넌트는 해당 props를 쓰지도 않는데 그저 Item 컴포넌트의 부모 컴포넌트라는 이유로 props를 전달하는 다리 역할만 한 것이다. 이것은 매우 비효율적이다. 지금은 3개의 컴포넌트지만, 10개라면? 생각만 해도 이..

What useReducer()는 useState() 대신 사용하는 Hook 함수이며, 다수의 상태를 관리하는 데 유용한 함수이다. useReducer() 함수를 실행하기 전, 먼저 reducer 함수를 만들어줘야 한다. reducer는 상태 객체와 행동 객체를 인자로 받아서 새로운 상태 객체를 반환하는 함수이다. How const Test = ({ num = 5 }) => { const reducer = (state, action) => { switch (action.type){ case 'increase': return state + action.num; case 'decrease': return state - action.num; case default: return state; } } const ..

What 인간에게 탄생부터 죽음까지 이르는 생명 주기가 있듯이 리액트의 컴포넌트에도 탄생-변화-죽음이라는 생명 주기가 있다. 컴포넌트가 화면에 나타나는 것을 Mount라 하고 업데이트(re-render)되는 것을 Update, 화면에서 사라지는 것을 UnMount라고 한다. 각 단계마다 컴포넌트를 제어하는 방법이 바로 useEffect이다. How Mount(탄생) // 컴포넌트가 화면에 생성되었을 때 실행 useEffect(() => { console.log('Mount') }, []) useEffect()는 기본적으로 콜백 함수를 가지며, deps라고 하는 의존성 배열을 가진다. deps를 빈 배열로 두면 컴포넌트의 탄생인 Mount일 때 한 번 console.log를 실행한다. Update(변화) ..

What 이 글을 읽기 전 먼저 컴포넌트의 구조와 각 컴포넌트마다 어떤 동작을 수행할 지에 대해서 이해해야 한다. 컴포넌트는 총 4개로 최상위 컴포넌트인 App, 그 아래 자식 컴포넌트인 Editor와 List, 최하위 컴포넌트인 Item으로 구성되어 있다. 최상위 컴포넌트인 App에서는 useState를 통해 state를 배열화시켜 그 안에 객체로서 입력된 데이터들을 저장할 것이다. 즉, App의 state가 출력될 데이터라고 생각하면 된다. 자식 컴포넌트인 Editor에서는 사용자가 입력한 데이터들을 App의 state에 저장하는 역할을 한다. App의 props로 전달받은 useState의 setState(상태 변화 함수)를 이용해서 부모 컴포넌트의 state를 변경할 수 있다. List 컴포넌트에..