Thinking in React

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

• 단일 책임 원칙: 하나의 컴포넌트는 한가지 일을 하는게 이상적인 원칙이다.
• 만약 하나의 컴포넌트가 커지게 되면 이는 보다 작은 하위 컴포넌트로 분리해야한다.

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

• 데이터 모델을 가지고 UI를 렌더링은 되지만, 아무 동작도 없는 버전을 만들어본다.
• 데이터 모델을 렌더링하는 앱의 정적 버전을 만들기 위해 다른 컴포넌트를 재사용 하는 컴포넌트를 만들고 Props를 이용해 데이터를 전달해준다. 정적버전을 위해 state는 사용하지 않는다.
• 앱을 만들때 하향식(top-down)이나 상향식(bottom-up)으로 만들지 정한다.

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

• UI를 상호작용하게 만들려면 기반 데이터 모델을 변경할 수 있는 방법이 있어야한다. 이를 React는 state를 통해 변경한다.
• 애플리케이션을 올바르게 만들기 위해서는 애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합을 생각해보아야한다. 여기서 핵심은 중복배제원칙이다.
• state로 판단할 수 있는 질문 3가지
  • 부모로부터 props를 통해 전달되나? 그러면 state가 아니다.
  • 시간이 지나도 변하지않는가? 그러면 state가 아니다.
    컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가? 그러면 state가 아니다.

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

• React는 항상 컴포넌트 계층구조를 따라 아래로 내려가는 단방향 데이터 흐름을 따른다는 점을 기억한다.
• 애플리케이션이 가지는 각각의 state에 대해서
  • state를 기반으로 렌더링하는 모든 컴포넌트를 찾는다.
  • 공통 소유 컴포넌트(common owner component)를 찾는다.
  • 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야한다.
  • state를 소유할 적절한 컴포넌트를 찾지 못했다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 소유 컴포넌트의 상위 계층에 추가한다.

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

• 계층 구조의 하단에 있는 컴포넌트에서 상위 컴포넌트의 state를 업데이트 한다.
• 상위 컴포넌트는 하위 컴포넌트에 콜백을 넘겨서 state가 업데이트되어야 할 때마다 호출되도록 한다. 상위 컴포넌트에서 전달 된 콜백은 setState()를 호출하고 앱이 업데이트 될 것이다.