출처: https://ko.reactjs.org/docs/thinking-in-react.html

1단계: UI를 컴포넌트 계층 구조로 나누기

• 무엇이 컴포넌트가 되어야 하는가?는 "단일 책임 원칙"(하나의 컴포넌트는 한가지 기능 만)에 따라
• 각 컴포넌트를 계층적으로(부모-자식) 표현

2단계: React로 정적인 버전 만들기

• state는 시간이 지남에 따라 변하는 데이터에 대해서만 만들 것 !
• state는 컴포넌트를 복잡하게 하고, 예측가능성을 낮추기 때문에 가능하면 최소화 할 것 !

3단계: UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기

• state는 i) 부모로부터 전달 되는 데이터가 아니고, ii) 시간이 지남에 따라 변하는 데이터이고, iii) 컴포넌트 안의 다른 props나 state로 계산 가능하다면 state가 아님

4단계: State가 어디에 있어야 할 지 찾기

• state를 기반으로 렌더링하는 모든 컴포넌트를 찾는다.
• 공통 소유 컴포넌트 (common owner component)를 찾는다. (계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트들의 상위에 있는 하나의 컴포넌트).
• 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 함.
• state를 소유할 적절한 컴포넌트를 찾지 못하였다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 오너 컴포넌트의 상위 계층에 추가

5단계: 역방향 데이터 흐름 추가하기

• 부모->자식으로 데이터 흐름은 props를 활용하고, 자식->부모로의 데이터 흐름 or 전달하고자 하는 경우는 부모의 함수를 자식이 props로 전달받아, 자식에서 해당 함수의 인자에 데이터를 담아 역방향으로 데이터 보낼 수 있음