1. React 데이터 흐름
리액트는 컴포넌트를 먼저 만들고 페이지를 조립하는 상향식(bottom-up)으로 앱을 만든다.
앱의 디자인을 전달받으면, 먼저 컴포넌트 계층 구조로 나누어야 한다. 컴포넌트를 디자인할 때는 하나의 컴포넌트가 하나의 일만 할 수 있도록 나누어야 한다. 컴포넌트를 나누고 나면, 이를 트리 구조로 나타낸다. 그리고 데이터를 어디에 둘지 결정해야 하는데, 데이터는 부모 컴포넌트에서 자식 컴포넌트로 흐른다. 즉 데이터의 흐름은 하향식(top-down)이다.
만약 상태가 특정 컴포넌트에만 유의미할 경우, 특정 컴포넌트에 두면 된다. 하지만 여러 컴포넌트에서 유의미할 경우, 공통의 부모 컴포넌트에 상태를 두어야 한다.
💡 데이터를 state(상태)로 만들 때는 세 가지를 고려하면 된다.
- 부모로부터 props를 통해 전달된다.
- 시간이 지나도 변하지 않는다.
- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능하다
=> 이에 해당되는 경우 state가 아니다.
2. 상태 끌어올리기
- 하위 컴포넌트의 이벤트로 상위 컴포넌트가 바뀌는 역방향 데이터 흐름을 해결하기 위해, 상위 컴포넌트의 상태를 변경하는 함수 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 형태로 만드는 것을 상태 끌어올리기라고 한다.
