[React 공식문서 공부] React로 생각하기

React 이미지

React는 사용자 인터페이스를 구축하기 위한 강력한 라이브러리이지만 이해하고 유지보수하기 쉬운 방식으로 앱을 구성하고 구축하는 방법을 이해하는 것은 까다로울 수 있습니다.

공식문서 “React로 생각하기” 챕터에서 React에서 생각하는 과정을 정리했습니다.

 

1단계: 목업으로 시작하기

앱을 만들기 전에 최종 제품이 어떻게 생겼는지 명확하게 이해하는 것이 중요하다고 나온다. 그래서 목업을 미리 알고 설계하는 것이 React로 생각하기 첫 번째 단계라고 생각한다.

JSON API 반환되는 데이터 형식을 미리알고 설계하는 게 좋은 방법이다. 데이터 형식을 알고 미리 모의는 최종 제품을 시각적으로 표현한 것으로 필요한 개별 구성 요소를 정의하고 함께 맞출 방법을 정의하는 데 도움이 됩니다.

 

예를 들어 JSON API 반환 형태:

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

반환형태 기반으로 목업 구상하기:

 

2단계: UI를 구성 요소 계층으로 분할

최종 제품을 UI를 명확하게 이해하고 나면 사용자 인터페이스(UI)를 더 작고 재사용 가능한 구성 요소로 분할해야 합니다. 컴포넌트로 분할하는 기준은 새로운 함수나 객체를 만들 때처럼 만드시면 됩니다. 한 가지 테크닉은 단일 책임 원칙입니다. 이는 하나의 컴포넌트는 한 가지 일을 하는 게 이상적이라는 원칙입니다(해당 원칙은 실제로 코드 리팩토링할때도 많이 적용된다). 하나의 컴포넌트가 커지게 된다면 이는 보다 작은 하위 컴포넌트로 분리되어야 하는게 가장 이상적입니다. UI를 구성 요소 계층으로 분할하면 코드를 구성하고 더 쉽게 이해할 수 있고 큰 규모에 프로젝트도 작은 단위로 블록 쌓듯이 쉽게 구현할 수 있습니다.

목업 계층분할 컴포넌트화

3단계: React로 정적인 버전 만들기

이제 필요한 구성 요소와 구성 요소가 서로 어떻게 맞는지 명확하게 이해했으므로 이제 앱 형태를 만드는 것에 집중하는 단계. 첫 번째 단계는 구성 요소 계층 구조를 사용하여 앱의 정적 버전을 만드는 것입니다. 즉, 아직 상호 작용에 대해 걱정하지 않고 앱의 구조에 집중해서 구현하는 단계입니다.

데이터 모델을 렌더링 하는 앱의 정적 버전을 만들기 위해 다른 컴포넌트를 재사용하는 컴포넌트를 만들고 props를 이용해 데이터를 전달해 줍시다. props는 부모가 자식에게 데이터를 넘겨줄 때 사용할 수 있는 방법입니다. 정적으로 앱을 만들 때는 state를 사용하지 마세요. state는 오직 상호작용을 위해, 즉 시간이 지남에 따라 데이터가 바뀌는 것에 사용합니다. 우리는 앱의 정적 버전을 만들고 있기 때문에 지금은 필요하지 않습니다.

 

4단계: UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기

UI를 상호작용하게 만들려면 기반 데이터 모델을 변경할 수 있는 방법이 있어야 합니다. 이를 React는 state를 통해 변경합니다. 하지만 state를 막무가내로 쓰는 게 아닌 최소한으로 쓰면서 state를 사용하지 않고 다른 데이터로 표현이 가능한지 확인부터 하는 게 좋습니다.

컴포넌트에서 어떤 게 state가 되어야 하는지 살펴봅시다. 이는 각 데이터에 대해 아래의 세 가지 질문을 통해 결정할 수 있습니다.

1. 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
2. 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
3. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

5단계: State가 어디에 있어야 할지 찾기

4단계에서 state를 최소화하는 작업이 끝나면 이제는 state를 어떤 컴포넌트에 위치해야 할지 정해야 합니다.

React는 항상 컴포넌트 계층수조를 따라 아래로 내려가는 단방향 데이터 흐름을 따른다.

앱에서 가지는 각각의 state를 정하는 기준:

• state를 기반으로 렌더링 하는 모든 컴포넌트를 찾으세요.
• 공통 소유 컴포넌트 (common owner component)를 찾으세요. (계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트들의 상위에 있는 하나의 컴포넌트).
• 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 합니다.
• state를 소유할 적절한 컴포넌트를 찾지 못하였다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 소유 컴포넌트의 상위 계층에 추가하세요.

6단계: 역방향 데이터 흐름 추가하기

지금까지 작성해 온 방식 데이터는 상위 구성 요소에서 하위 구성 요소로 한 방향으로 흐릅니다. 이제 다른 방향의 데이터 흐름을 만들어볼 시간입니다. 역 데이터 흐름을 추가하면 하위 구성 요소가 상위 구성 요소의 상태를 사용하여 업데이트할 수 있습니다. 업데이트하는 방법은 state값은 변경할 수 있는 메서드 setState()를 사용해서 업데이트할 수 있습니다.

React는 전통적인 양방향 데이터 바인딩(two-way data binding)과 비교하면 더 많은 타이핑을 필요로 하지만 데이터 흐름을 명시적으로 보이게 만들어서 프로그램이 어떻게 동작하는지 파악할 수 있게 도와줍니다.

 

 

 

 

해당 정리한 글 통해서 React 앱을 작성하는 사고방식을 길러서 내 방식대로가 아닌 항상 일관성 있는 React 앱을 작성하는 연습을 해야겠다.