[React Official Document] #2 Thinking in React

본 문서에서는 어떻게 리액트 앱을 설계하는지에 대해 설명하고 있다. 

상태 관리와 상태에 따른 컴포넌트 분리에 대해 잘 알 수 있다. 

예제 코드가 주어지지만 이 포스팅에서는 생략할 것이다. 

아래의 링크를 통해 방문하여 직접 읽어보는 것을 권장한다. 

https://react.dev/learn/thinking-in-react

Thinking in React – React

---

백엔드 개발자로부터 JSON API, 디자이너로부터 (피그마같은)목업 디자인이 주어질 것이다. 

우리는 이 정보들을 기반으로 웹 사이트를 개발해야한다. 

총 5개의 단계로 구분하여 설명할 수 있다. 

 

1. UI를 컴포넌트들로 나누기

프로그래밍: SRP(Single Responsibility Principle)를 지키는 것이 좋다. 

CSS: 클래스 선택자는 컴포넌트 내부에서 사용하는 것이 좋다. 

컴포넌트는 캡슐화 되기 때문에 클래스 이름이 같아도 다른 스타일을 적용할 수 있기 때문이다. 

즉, 컴포넌트 내부에서 스타일을 정의하라는 뜻이다. 

디자인: 어떻게 레이어를 구성할것인지 생각해야한다. 

데이터 모델과 UI는 비슷한 구조를 가진다. 

데이터 모델의 요소와 UI요소는 대응이 될 수 있다. 

 

2. 리액트로 정적인 페이지 만들기

먼저 정적인 화면을 만들고 상호작용 가능한 요소를 추가한다. 

정적인 화면을 구성할 때는 나중에 다시 쓰일 컴포넌트, props를 통해 데이터를 받을 컴포넌트를 생각해야한다. 

이때 주의할 점은 상태(state)를 사용하면 안된다. 

상태는 오직 상호작용을 위해서만 사용되기 때문에 정적인 화면에서는 필요가 없다. 

top-down 방식과 bottom-up 방식을 사용할 수 있다. 

말 그대로 제일 위에서 부터, 가장 큰 컴포넌트 부터 가장 작은 컴포넌트로 설계할 수도 있고, 

가장 작은 컴포넌트 부터 가장 큰 컴포넌트로 설계할 수도 있다. 

보통 간단한 프로젝트에서는 top-down 방식이, 큰 프로젝트에서는 bottom-up 방식이 사용된다. 

부모 컴포넌트는 자식 컴포넌트들에게 props로 데이터를 넘겨줄 것이다. 

이것을 one-way data flow 라고 부른다. 

데이터는 상위 컴포넌트에서 하위 컴포넌트로만 전달된다. 

 

3. UI 상태를 위한 가장 작지만 완벽한 표현식 찾기

state, 상태를 표현하자면 '애플리케이션이 기억해야 하는, 가변적인 데이터의 최소 단위' 이다. 

상태를 설계할 때 가장 중요한 것은 DRY(Don't Repeat Yourself) 이다.

쓸데없는 반복을 없애라는 것이다.  

예를 들자면, 상품의 리스트가 있다. 

이 상품의 리스트를 상태로 관리하는데, 상품들의 갯수를 또 상태로 관리하지 말고 productList.length와 같이 사용하는것이 옳다.

데이터의 조각을 찾고, 우리가 상태로 관리해야 할 조각을 찾아내야한다. 

우리가 상태로 관리해야할 조각을 찾는 기준은 다음과 같다. 

1. 시간이 지나도 변하지 않는가?
2. 부모 컴포넌트를 통해 props로 전달받았는가?
3. 컴포넌트 내부에 존재하는 상태를 사용하면 얻을 수 있는가?

만약 위 기준들 중 하나라도 만족한다면 상태가 아니다. 

 

4. 상태가 있어야 할 장소 찾기

2에서 언급했듯이, 리액트는 one-way data flow를 사용한다. 

그래서 오직 상위 컴포넌트에서 하위 컴포넌트로만 데이터를 전달할 수 있다. 

상태가 있어야 할 장소는 다음과 같은 단계를 거쳐 정할 수 있다. 

1. 상태를 렌더링하는 모든 컴포넌트 찾기
2. 가장 가까운, 공통적인 부모 컴포넌트 찾기
3. 상태가 있어야 할 공간 찾기: 아래 세 가지 방법이 있음.
   1. 공통적인 부모 컴포넌트
   2. 공통적인 부모 컴포넌트의 상위 컴포넌트
   3. 상태 정보만을 가지는 부모 컴포넌트 만들기

 

5. 데이터 처리기 추가하기

onChange, onClick과 같은 value를 추가하여 프로젝트를 완성한다.