리액트로 사고하기

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

목업으로 시작하기

1단계: UI를 컴포넌트 계층 구조로 나눈다.

1. 모든 컴포넌트의 주변에 박스를 그리고 각각에 이름을 붙여야 한다. 컴포넌트는 새로운 함수나 객체를 만들 때처럼 만든다. 하나의 컴포넌트는 하나의 기능을 가진다.

• 하나의 컴포넌트가 커진다면 그보다 작은 하위 컴포넌트로 분리한다.
• 각 컴포넌트가 데이터 모델의 한 조각을 나타내도록 분리한다.

2. 이를 계층 구조로 나열한다. 다른 컴포넌트 내부에 나타나는 컴포넌트는 계층 구조의 자식으로 나타내면 된다.

2단계: 리액트로 정적인 버전을 만들어본다.

props를 이용해 데이터를 전달한다. 이때 state를 사용하지 않는다. state는 상호작용을 위해 사용하는 것이다!
하향식으로 만들 것인지 상향식으로 만들 것인지 결정한다. 프로젝트가 커질수록 상향식으로 만드는 것이 더 쉽다.

3단계: UI 최소한의 state를 찾는다.

UI를 상호작용하게 만드려면 기반 데이터 모델을 변경할 수 있는 방법이 있어야한다. 이때 state를 사용한다!! 변경 가능한 state를 최소한으로 찾아 만든다. 중복을 배제해야 한다. 다른 방법이 있다면(총개수가 필요하다면 .length를 쓰면 된다) state를 사용하는 것을 최대한 배제한다.

1. 데이터를 나열해본다.

2. state 여부 확인한다.

[ ] 부모로부터 prop를 통해 전달되는가
[ ] 시간이 지나도 변하지 않는가
[ ] 컴포넌트 안의 다른 state나 props로 계산 가능한가

4단계: state를 어디에 둘지 찾는다.

1. state를 기반으로 렌더링하는 모든 컴포넌트를 찾는다.

2. 공통소유 컴포넌트를 찾는다.

3. 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야한다.

4. state를 소유할 컴포넌트가 없다면 state를 소유하는 컴포넌트를 하나 만들어서 공통소유 컴포넌트의 상위에 추가한다.

5단계: 역방향 데이터흐름을 추가한다.