State 내리기 / 끌어올리기

이전까지 알아본 State를 이제 활용해봅시다.

State 내리기

State 내리기란 부모 컴포넌트의 상태 변수를 자식 컴포넌트의 props로 전달하는 것으로 부모 컴포넌트의 상태 변수가 변경되면 부모 컴포넌트, 자식 컴포넌트 모두 다시 렌더링됩니다.

 

State 끌어 올리기

• State 끌어올리기란 자식 컴포넌트의 변경 사항을 부모 컴포넌트로 전달하는 방법으로 부모 컴포넌트에서 정의한 함수를 자식 컴포넌트의 props 변수로 전달, 해당 함수를 자식 컴포넌트에서 이벤트 핸들러로 지정하는 것입니다.
• 두 컴포넌트의 state가 항상 함께 변경되기를 원할 경우,각 컴포넌트에서 state를 제거하고 가장 가까운 공통 부모 컴포넌트로 옮긴 후 props로 전달해야 하는데 이 방법을 'State 끌어올리기'라고 합니다.

각 state의 단일 진리의 원천

이렇게 리액트에서는 많은 컴포넌트들이 자체 state를 가지며, 각각의 고유한 state에 대해 어떤 컴포넌트가 “소유”할지 고를 수 있는 것입니다.

이는 모든 state가 한 곳에 존재한다는 의미가 아니라 그 정보를 가지고 있는 특정 컴포넌트가 있다는 것을 말합니다. 컴포넌트 간의 공유된 state를 중복해서 사용하는 것이 아니라 그들의 공통 부모로 끌어올리고 필요한 자식에게 전달하는 방법으로 사용하는 것이 바람직 합니다.

 

요약

• 두 컴포넌트를 조정하고 싶을 때 state를 그들의 공통 부모로 이동하면 됩니다. -> state 끌어올리기
• 그리고 공통 부모로부터 props를 통해 정보를 전달합니다 -> state 내리기
• 마지막으로 이벤트 핸들러를 전달해 자식에서 부모의 state를 변경할 수 있도록 합니다.
• 컴포넌트를 (props로부터) “제어”할지 (state로부터) “비제어” 할지 고려하면 유용합니다.