React 컴포넌트 설계 방법

React 공식 홈페이지 - React로 생각하기

 

1단계 : UI를 [컴포넌트 계층 구조]로 나누기

목업	컴포넌트 분리

먼저, <왼쪽 그림>과 같이 하나의 박스가 있다고 하면, <오른쪽 그림>과 같이 각 영역을 컴포넌트로 분리하는 작업을 해야 한다.

 

컴포넌트를 분리하는 기술 중 하나는 단일 책임 원칙이다.

하나의 컴포넌트는 '한 가지 일'을 하도록 한다.

 

 

위 그림의 예시를 보면, 각 컴포넌트가 <데이터 모델>의 한 조각을 나타낸다.

(1) 노란색 : 전체 포괄

(2) 파란색 : 검색 창

(3) 연두색 : input 값에 따른 데이터 전체

(4) 하늘색 : 각 카테고리의 제목

(5) 빨간색 : 각 카테고리별 제품

 

 

이를  계층 구조 로 나타내면 아래와 같다.

• 예시 전체
  • 검색창
  • 검색 input 값에 따른 데이터 전체
    
    • 각 카테고리의 제목
    • 각 카테고리별 제품

 

 

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

정적 버전을 만드는 것은 생각은 적게 필요하지만 타이핑은 많이 필요로 하고, 상호작용을 만드는 것은 생각은 많이 해야 하지만 타이핑은 적게 필요로 한다. 따라서 정적인 버전을 먼저 만드는 것을 추천한다.

 

**static version에서는....

-자식 컴포넌트에게 props를 넘겨준다.

-state은 사용하지 않는다. (오로지 상호작용, 즉 시간이 지남에 다라 데이터가 바뀌는 것에 사용한다.)

 

**하향식 vs 상향식

= 계층구조의 하층부 부터 만드는 방식 vs 상층부 부터 만드는 방식

주로 간단한 예시에서는 하향식, 큰 프로젝트는 상향식으로 만든다.

 

 

3단계 : 최소한의 UI state 만들기

state의 최소 집합을 생각해봐야 한다. ( 중복배제 원칙 )

 

 

그리고 어떤 것이 state가 되어야 할지 다음 원칙을 살펴본다.

1. 부모로부터 props를 통해 전달되지 않는 것.
2. 시간이 지나면 변하는 것.
3. 컴포넌트 안의 다른 state나 props를 가지고 계산하지 못하는 것.

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

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

 

 

 

 

 

 

참고 사이트

리액트 공식사이트 - React로 생각하기