[React] 상태 관리 전략 : 끌어올리기

상태

컴포넌트는 컴포넌트 안에서만 접근 가능한 로컬 데이터인 "상태(state)"를 가질 수 있다. 이 데이터를 다른 컴포넌트와 공유하려면 React의 단방향 데이터 흐름에 따라 두 컴포넌트 보다 상위 위치에 자리 잡은 컴포넌트로부터 속성(props)으로 전달받아야 한다.

 

상태 관리 전략 : 끌어올리기

React 컴포넌트 로컬 데이터인 상태를 관리하는데 사용되는 가장 주요한 전략 중 하나는 상태를 끌어 올리거나 끌어 내리는 것이다. 우선은 끌어올리기에 대해 알아보자. 

 

상태 끌어 올리기(↑) 전략

 

A와 C는 상태를 관리 중이고, A는 B컴포넌트와 연관된 상태 관리 중. 

만약 B가 C에서 관리 중인 State에 접근할 수 있어야 하고, C의 상태가 변경될 때마다 B에서도 변경된 값을 표시해야한다면, 현재 상황에서는 C의 상태를 B에 전달할 방법이 없다. React의 데이터 흐름은 단방향으로 '하향식'구조이기 때문이다. 

 

따라서 B에서도 C를 관리하기 위해서는 상위 컴포넌트인 A 컴포넌트로 C의 상태를 전달해주어야한다. 이것이 React의 상태 끌어 올리기(↑) 전략이다. 

 

 

예제 참고

https://ko.react.dev/learn/sharing-state-between-components

컴포넌트 간 State 공유하기 – React