React 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한 다는 점이다. 컴포넌트를 먼저 만들고 페이지를 조립해 나가는 형식인 상향식(buttom-up)으로 앱을 만드는데 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다.
컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달인자 혹은 속성처럼 전달 받을 수 있었다.
데이터를 전달하는 주체는 부모 컴포넌트이고 이 데이터의 흐름은 하양식(top-down)으로 진행된다.
이를 통해 React가 단방향으로 데이터가 흐른다는 특징을 가지고 있다는 것을 알 수 있다.
하지만 만약 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 이때는 공통소유 컴포넌트를 찾아 그곳에 상태를 위치해야 한다.
즉 두개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때에는 두 자식의 공통 부모 컴포넌트에 상태를 위치해야 한다.
State 끌어올리기
이렇게 상태를 전부 정하고 나서 생각해보니, 부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변할 때가 생긴다. 그 예로 NewTweetForm 컴포넌트에서 새로운 트윗을 추가하고 상태를 관리한다고 하면 부모 컴포넌트 Twittler에서도 트윗 목록의 상태를 변화시켜야 한다.
이러한 경우에 사용할 수 있는게 바로 State 끌어올리기다.
이는 상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달해서 해결할 수 있다. 이는 마치 콜백 함수를 사용하는 방법과 비슷하다.
State 끌어올리기 예제
ParentComponent 에서 관리하는 value State를 ChildComponent에서 변경하고자 한다면?
<ParentComponent>에 있는handleChangeValue함수를<ChildComponent>에 props로 보내준다.<ChildComponent>해당 props를 받아와 변경하고자 하는 값을 전달한다.<ParentComponent>에 있는 handleChangeValue 함수에서 useState의 두 번째인자인 setter함수를 이용해서 state 값을<ChildComponent>준 값으로 변경한다.
