https://ko.reactjs.org/docs/thinking-in-react.html를 읽고 정리한 글입니다
- 목업으로 시작하기
- 1단계 : UI를 컴포넌트 계층 구조로 나누기
- 단일 책임 원칙(single responsibility principle)에 따라 컴포넌트 구성 ⇒ 하나의 컴포넌트는 한 가지 일을 한다
- UI와 데이터 모델이 같은 인포메이션 아키텍처(information architecture)를 가지는 것이 일반적 ⇒ 각 컴포넌트가 데이터 모델의 한 조각을 나타내도록 분리
- 2단계: React로 정적인 버전 만들기
- state는 상호작용을 위해서만 사용
- 만드는 건 하향식(top-down)이 쉽지만, 프로젝트가 커지면서 테스트 작성하기엔 상향식(bottom-up)이 더 쉽다
- 단방향 데이터 흐름(one-way data flow) (또는 단방향 바인딩(one-way binding)
- 3단계: UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기
- state를 이용하여 UI 상호작용하게 하기
- state의 최소 집합을 생각하기 ⇒ 중복배제 원칙(Dont' repeat yourself)
- 예 : todo리스트를 만들 때, todo 개수를 구하는 state는 불필요하다. todo 리스트의 길이를 가져오면 되기 때문
- state의 조건
- 부모로부터 props를 통해 전달되지 않는다
- 시간이 지나면 변한다
- 컴포넌트 안의 다른 state나 props로 계산이 불가능하다
- 4단계: State가 어디에 있어야 할 지 찾기
- 어떤 컴포넌트가 state를 가질지 판단하기
- state 기반으로 렌더링하는 모든 컴포넌트 찾기
- 공통 소유 컴포넌트(common owner component) 찾기
- 공통 또는 더 상위의 컴포넌트가 state를 가져야 한다
- 만약 state를 소유할 컴포넌트를 찾지 못했다면 state를 소유하는 컴포넌트를 새로 만들어서 공통 오너 컴포넌트의 상위 계층에 추가하기
- 5단계: 역방향 데이터 흐름 추가하기