[정리] Thinking in React

1. UI를 계층적으로 쪼개라

- Single Responsibiliry Principle. 하나의 컴포넌트는 하나의 역할만 하도록 분리

 

2. 정적인 페이지를 만들기

- 재사용 가능한 컴포넌트와 props를 이용하여 데이터 모델을 렌더하는 정적인 페이지를 만들기

- 상호작용하는 페이지가 아닌 이상 state를 굳이 사용할 필요는 없음

- 작은 프로젝트는 상위 컴포넌트부터 하위 컴포넌트로, 큰 프로젝트는 하위 컴포넌트에서 상위 컴포넌트 순서로

 

3. UI의 state를 최소로 하기

- 부모 컴포넌트로 부터 props를 받아서 만들 수 있는지

- 상태가 계속해서 변하는지

- 다른 상태에서 계산할 수 있는지

 

4. state가 있어야할 곳을 정하기

- 대부분 부모 컴포넌트에서 state를 가지고 있음

 

5. 역방향 데이터 흐름 추가하기

- 자식 컴포넌트에서 부모 컴포넌트의 state를 수정해야할 때 부모 컴포넌트에서 state를 수정할 수 있는 함수를 자식 컴포넌트에 넘겨줌

- ex. 상태를 관리하는 컴포넌트 아래에 데이터를 입력하는 컴포넌트가 존재할 경우

 

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

Thinking in React – React