React로 사고하기 요약

React로 사고하기 요약

React로 사용자 인터페이스를 빌드할 때, 먼저 컴포넌트 조각으로 나눈다. 그리고 각 컴포넌트의 다양한 시각적 상태들을 정의한다. 마지막으로 컴포넌트들을 연결하여 데이터가 그 사이를 흘러가게 한다.

React로 UI를 구현하기 위해 일반적으로 다섯 가지 단계를 거친다.

step 1: UI를 컴포넌트 계층으로 쪼개기

step 2: React로 정적인 버전 구현하기

상호작용 기능은 추가하지 않고 데이터 모델로부터 UI를 렌더링하는 버전 만들기. 데이터 모델을 렌더링하는 앱의 정적인 버전을 만들기 위해 다른 컴포넌트를 재사용하고 props를 이용하여 데이터를 넘겨주는 컴포넌트를 구현.

step 3: 최소한의 데이터만 이용해서 완벽하게 UI State 표현하기

UI를 상호작용하게 만들려면 사용자가 기반 데이터 모델을 변경할 수 있게 해야 한다. React는 state를 통해 기반 데이터 모델을 변경할 수 있게 한다.

state는 앱이 기억해야 하는, 변경할 수 있는 데이터의 최소 집합. state를 구조화하는 데 가장 중요한 원칙은 중복배제원칙. 어플리케이션이 필요로 하는 가장 최소한의 state를 파악하고 나머지는 실시간으로 계산할 것.

state가 안되는 조건

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

step 4: State가 어디에 있어야 할 지 정하기

React는 항상 컴포넌트 계층구조를 따라 부모에서 자식으로 데이터를 전달하는 단방향 데이터 흐름을 사용한다.

1. 해당 state를 기반으로 렌더링 하는 모든 컴포넌트 찾기
2. 가장 가까운 공통 부모 컴포넌트 찾기(계층에서 모두를 포괄하는 상위 컴포넌트)
3. state 위치 결정(공통 부모, 혹은 공통 부모의 상위 컴포넌트. 적절한 컴포넌트가 없는 경우 state를 소유하는 컴포넌트를 상위 계층에 추가하기)

step 5: 역 데이터 흐름 추가하기

사용자 입력에 따라 state를 변경하려면 반대 방향의 데이터 흐름을 만들어야 한다. 이를 위해서 계층 구조의 하단에 있는 컴포넌트에서 상위 컴포넌트의 state를 업데이트 할 수 있어야 한다.