react로 생각하기

react 공식문서 메인컨셉 12. react로 생각하기

 

1. UI를 컴포넌트 계층으로 분해하기

디자인 파일 위에 모든 컴포넌트를 박스칠하고 이름을 지어줍니다.

컴포넌트를 결정하는 방법은 하나의 컴포넌트는 한가지 일만 하는 것을 원칙으로 나누는 것입니다.

나는 컴포넌트들을 계층으로(트리) 나타내봅시다.

 

2. 정적인 버전의 react 만들기

상호작용이 없는 (값의 변화라던가 state같은) 버전을 먼저 만듭니다.

생각은 적고 타이핑이 많은 부분이며 쉽기 때문입니다.

이 단계에서는 props는 사용하되, state를 사용하지 않습니다.

컴포넌트를 구성하는 것은 위아래 방식과 아래위 방식이 있습니다. 큰 프로젝트는 위아래가 더 쉽고, 작은 프로젝트는 아래위가 더 쉽습니다.

 

3. ui의 상호작용에 필요한 최소한의 state 설정하기

state인지 아닌지 확인하기 위한 방법

1) 부모의 props를 통해 전달되는 데이터인가?

2) 시간이 지나도 변하지 않는가?

3) 컴포넌트 안에서 다른 state나 props에 의해 계산되는 값인가?

위의 3가지에 해당한다면 state가 아닙니다.

 

4. state가 어디에 존재해야 할지 결정하기

state에 의해 렌더링되는 컴포넌트를 찾고 이들을 다 아우를 수 있는 상위 컴포넌트에 state를 위치시킵니다.

만일 그런 컴포넌트를 못찾겠다면 새로운 컴포넌트로 모든 컴포넌트들을 감싸고, 새 컴포넌트에 state를 위치시킵니다.

 

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

react는 단방향 데이터이기 때문에 양방향으로 동작하기 위해서는 몇가지 작업을 더 해주어야 한다.