React 데이터 흐름
컴포넌트를 계층 구조로 나누기
React의 개발방식의 가장 큰 특징은 페이지 단위가 아닌 컴포넌트 단위로 시작한다는 점이다. 따라서 필요에 따른 각각의 컴포넌트를 만든 후 조립하는 상향식(bottom-up)으로 앱을 만든다. 이 방식은 테스트가 쉽고 확정성이 좋다. 때문에 앱의 디자인을 전달 받을 시 컴포넌트 계층 구조로 나눠 놓는 것이 가장 먼저 해야할 일이다.
데이터는 위에서 아래로 흐른다
컴포넌트를 계층 구조로 나눴다면 데이터의 흐름에 대해서 생각해볼 차례이다. 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 인자(arguments)나 속성(attributes)처럼 전달 받을 수 있다. 즉 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 이는 데이터 흐름이 하향식 (top-down)임을 의미한다. 이 원칙은 React의 단방향 데이터 흐름(one-way data flow) 을 따르는 원칙이다. 또한 컴포넌트는 props를 통해 받은 데이터가 어디서 왔는지 알지 못한다.
데이터 정의
이렇게 데이터의 흐름을 생각하며 애플리케이션에서 필요한 데이터가 무엇인지 먼저 정의해보자. 모든 데이터를 state로 둘 필요는 없다. 사실 state는 최소화 하는것이 가장 좋으며 state가 많아질 수록 애플리케이션은 복잡해진다는 것을 명심해야한다. 그러니 어떤 데이터를 state로 두어야 하는지 결정하기전 다음 질문들을 통해 판단해보는 시간을 가지길 권장하며 질문에 하나라도 해당된다면 state가 아니라고 판단해야한다.
- 부모로부터 props를 통해 전달되는가
- 시간이 지나도 변하지 않는가
- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가
상태 위치 정하기
state를 결정했다면 어디에 위치시켜야 하는 지 생각해볼 차례이다. state가 특정 컴포넌트에서만 유의미하다면 특정 컴포넌트에만 두면 되기에 어렵지 않지만 하나의 state를 기반으로 두 컴포넌트가 영향을 받는다면 공통 소유 컴포넌트를 찾아 그곳에 state를 위치시켜야한다.
