이번 실습 시간에는 카운터 앱을 만들어보았다. App 컴포넌트와 그 아래에 자식 요소로, 현재 카운트를 표시하는 Viewer 컴포넌트, 증감 버튼을 담당하는 Controller 컴포넌트가 있다. 여기서 현재 카운트 값에 대한 state가 필요한데, 해당 state는 어떤 컴포넌트에서 생성해야 할까? 정답은 바로 App 컴포넌트이다. 이유는, Viewer 컴포넌트에서도 count 값이 필요하고, Controller 컴포넌트에서도 count 값과 setCount가 필요하기 때문이다. 그렇지만 리액트에서는, 컴포넌트 간에 데이터를 전달하기 위해서 props를 이용해야 하는데, 이는 부모에서 자식 방향으로만 이동할 수 있다. 그러므로 두 형제 컴포넌트가 같은 state을 공유하기 위해서는 부모 컴포넌트에 state를 생성해야 하는 것이다. 이를 State Lifting, 즉 state 끌어 올리기라고 표현한다.
'프론트엔드 > 한 입 크기로 잘라먹는 리액트' 카테고리의 다른 글
| React.js - useMemo와 연산 최적화, React.memo와 컴포넌트 렌더링 최적화, useCallback과 함수 재생성 방지 (0) | 2025.02.05 |
|---|---|
| React.js - useReducer 소개 (0) | 2025.02.04 |
| React.js - State로 사용자 입력 관리하기 2, useRef로 컴포넌트의 변수 생성하기, React Hooks (0) | 2025.01.27 |
| React.js - 이벤트 처리하기, State로 상태관리하기, State와 Props, State로 사용자 입력 관리하기 1 (0) | 2025.01.26 |
| React.js - React 컴포넌트, JSX로 UI 표현하기, Props로 데이터 전달하기 (1) | 2025.01.22 |