React 공식문서 - Thinking in React

JSON API와 디자이너의 목업이 있다고 가정을 했을 때, React로 검색 가능한 제품 데이터 테이블을 구축하는 사고 과정을 안내하는 챕터.

 

React에서 UI를 구현하려면 일반적으로 동일한 5단계를 따른다.

 

Step 1: Break the UI into a component hierarchy(UI를 컴포넌트 계층 구조로 나누기)

 

목업의 모든 컴포넌트와 하위 컴포넌트 주위에 상자 그리고 이름을 정한다.

 

컴포넌트는 단일 책임 원칙(single responsibility principle) 기법에 따라 이상적으로 한 가지 일만 수행해야 한다. 만약 컴포넌트가 늘어나게 되면 더 작은 하위 컴포넌트로 분해해야한다.

 

목업에서 컴포넌트를 식별했다면, 계층 구조로 정렬한다.

---

Step 2: Build a static version in React(React로 정적인 UI 만들기)

 

컴포넌트의 계층 구조를 완성한 다음에는 앱을 구현할 차례이다. 가장 간단한 접근은 상호작용을 추가하지 않고 데이터 모델에서 UI를 렌더링하는 버전을 만들고 그 다음 상호작용을 별도로 추가하는 것이 더 쉬운 경우가 많다.

 

데이터 모델에서 UI를 렌더링하는 앱의 정적 버전을 만들기 위해서는 재사용 components를 만들고 props를 사용해서 데이터를 전달한다. 이때, 정적 버전에서는 state는 사용하지 않는다. props의 전달은 보통 간단한 예시에서는 하향식으로 진행하고 대규모 프로젝트에서는 상향식으로 진행하는 것이 더 쉽다.

 

만약 데이터가 최상위 컴포넌트에서 트리 하단에 있는 컴포넌트로 흘러내리면 이를 단방향 데이터 흐름이라고 한다.

---

Step 3: Find the minimal but complete representation of UI state(최소한의 완전한 UI state 찾기)

 

UI의 상호 작용을 위해서는 데이터 모델을 변경해야하고, 이때 state를 사용할 수 있다. state를 '앱이 기억하는 최소한의 변화하는 데이터 집합'으로 생각하고 state를 구조화할때는 DRY(Don't Repeat Yourself, 직접 반복하지 않기)를 유지해야 한다.

 

먼저 애플리케이션의 모든 데이터 조각을 생각하고, 그 중 어떤 것이 state로 관리되는지 아닌지에 대해서 식별한다.

 

* DRY(Don't Repeat Yourself) 원칙은 중복을 최소화하는 소프트웨어 개발 원칙이다. 코드의 일부가 동일한 정보나 동작을 반복해서 표현한다면, 이를 별도의 단일 부분으로 분리하고 이를 재사용하는 것이 좋다.

리액트에서의 상태 관리에 상태 업데이트 로직이 여러 곳에서 반복되는 것을 피하고, 필요한 로직을 컴포넌트 또는 커스텀 훅 등을 사용하여 재사용 가능한 단위로 분리하는 것을 의미한다.

---

Step 4: Identify where your state should live(state가 어디에 있어야 할지 파악하기)

 

다음으로는 state를 변경하는 데 책임이 있는 컴포넌트, 즉 state를 '소유'하는 컴포넌트를 식별해야 한다. 이때, React는 상위 컴포넌트에서 하위 컴포넌트로 데이터가 흐르는 단방향 데이터 흐름을 따른다는 것을 기억해야 한다.

 

먼저 각각 state를 기반으로 렌더링하는 모든 컴포넌트와 그 state에 영향을 받는 가장 가까운 공통 상위 컴포넌트를 찾는다. 그리고 공통 상위 컴포넌트 혹은 더 상위 컴포넌트에 state를 둔다.

---

Step 5: Add inverse data flow(역방향 데이터 흐름 추가하기)

 

사용자의 입력에 따라 state를 변경하는 경우, 계층 구조상 깊은 곳에 있는 폼 컴포넌트가 높은 곳에 있는 state를 업데이트해야 하고 이는 곧 역방향으로 데이터가 흐른다는 것을 의미한다. 이 경우 state를 정의한 컴포넌트에서 state를 변경하는 함수를 props를 통해서 전달해서 상위 컴포넌트의 state를 변경해야 한다.

---

* 참고 : React 공식문서(https://react-ko.dev/learn)