state 끌어올리기

동일한 데이터에 대한 변경 사항을 여러 컴포넌트에 반영해야 할 경우
가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋다

자식에는 setState()를 props로 전달하여 상태를 조상으로 끌어올릴 수 있도록 하고
조상의 변경되는 state를 props로 전달 받아 스스로의 상태를 변경할 수 있도록 한다

props

props 는 읽기 전용이다
전달 받은 컴포넌트에서는 해당 값을 제어할 능력이 없다

교훈

리액트 애플리케이션 안에서 변경이 일어나는 데이터에 대해서는
진리의 원천을 하나만 두어야 한다
보통 state는 렌더링 시 값이 필요한 컴포넌트에 추가된다
여러 곳에서 필요하게 되면 가장 가까운 공통 조상으로 끌어올리고
다른 컴포넌트 간 state를 동기화 하려고 노력하는 대신
하향식 데이터 흐름에 기대도록 한다

state를 끌어올려 구현하는 방식은 양방향 바인딩 보다 더 많은 보일러 플레이트 코드를
유발하지만 버그를 찾고 격리하기 더 쉽게 만든다