State Lifting
State Lifting (State 끌어올리기)
- React의 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 전달하는 하향식이자 단방향 데이터 흐름을 따름
- 만약, 하나의 상태가 여러 컴포넌트에 영향을 준다면, 해당 컴포넌트들 간의 가장 가까운 공통의 상위 컴포넌트에 상태를 끌어올리면 됨
- 이것을 State Lifting (State 끌어올리기)라고 함
- 공유될 상태를 소유한 컴포넌트가 진리의 원천이 됨
- 하지만 실제로는 하위 컴포넌트에서 이벤트가 일어나 상위 컴포넌트의 상태를 갱신하는 경우가 존재하고, 이는 역방향 데이터 흐름처럼 보일수도 있음
- 이를 위해 React에서 제시한 방법은 상위 컴포넌트에 정의된 상태를 변경하는 함수 자체를 하위 컴포넌트에 props로 전달하고, 하위 컴포넌트에서 이 콜백 함수를 실행하는 것임
- 이렇게 하면 단방향 데이터 흐름의 원칙을 지킬 수 있음
예제
└ 하위 컴포넌트가 전달받은 함수를 버튼 클릭 이벤트가 발생할 때 실행하여, 폼 엘리먼트에 입력된 값으로 상위 컴포넌트의 상태를 갱신함
'React > 2022-上' 카테고리의 다른 글
| useRef (0) | 2022.04.11 |
|---|---|
| Pagination vs Infinite Scroll (0) | 2022.04.04 |
| State Prev (1) | 2022.04.04 |
| State Lifecycle (0) | 2022.03.31 |
| Class / Functional Component (클래스형 컴포넌트, 함수형 컴포넌트) (1) | 2022.03.28 |