[React] 12. React로 사고하기(마지막)

출처: React 공식 홈페이지

React로 사고하기 – React (reactjs.org)

 

 

1. 상품을 검색하는 데이터 테이블을 만드는 과정에서 React에 걸맞는 생각의 흐름을 알아보자

> 공식문서를 보는것이 좋다. 아래는 요약만 해두었다.

 

 

2. UI를 컴포넌트 계층 구조로 나누기

> UI를 컴포넌트로 쪼갠다.
> 단일 책임의 원칙
  하나의 컴포넌트는 한가지 일을 한다.

 

 

3. 정적인 버전 만들기

> state없이 props를 받기만하고 UI 렌더링이 되도록 만든다.
> 작은 UI 컴포넌트는 하향식으로 컴포넌트를 만들고 
> 큰 UI 컴포넌트는 상향식으로 컴포넌트를 만드는 편이다.

 

 

4. state를 찾아내기

(1) 부모로부터 전달되는 props - state가 아니다
(2) 시간이 지나도 변하지 않는다 - state가 아니다
(3) 컴포넌트 안의 다른 state나 props를 가지고 계산이 가능하다 - state가 아니다

state는 시간이 지남에 따라 변하면서 다른 것들로부터 계산이 될 수 없는것이다.
즉, UI단을 통해 사용자의 행동으로 변하는 것이다.

 

 

5. state가 어떤 컴포넌트에 있어야 할지 찾기

> 두개 이상 컴포넌트에 공유 되는 공유되기 전 상위 컴포넌트가 state를 가져야 한다.
> state를 소유할 적절한 컴포넌트를 찾지 못하였다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 오너 컴포넌트의 상위 계층에 추가한다.

 

 

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

> 하위 컴포넌트에서 상위 컴포넌트의 state를 업데이트 할 수 있도록 한다.