React | <프레젠트 컴포..>와 <컨테이너 컴포..>로 분리하는 방법

 

다음은 컴포넌트를 어떻게 분리해야하는지 알려주는 고전적인 문서다.

Presentational and Container Components  /  번역본

 

 

 

위 문서에 따르면 컴포넌트는 성격별로 2가지로 나눠볼 수 있다.

프레젠테이션 컴포넌트	컨테이너 컴포넌트
어떻게 보여지는가와 관련	어떻게 동작하는가와 관련
프레젠테이션 컴포넌트, 컨테이너 컴포넌트 모두 자식이 될 수 있다.
DOM 마크업이나 스타일 시트를 포함한다.	DOM 마크업이나 스타일 시트가 없다.
액션, store 등에 의존적이지 않다.	액션을 호출한다.
데이터 가져오기, 변경 등에 관여하지 않는다.	상태가 자주 변경된다.
props를 통해 배타적으로 콜백함수나 데이터를 받는다.

 

 

 

예를 들어 <저장> 버튼을 만든다고 하자. 버튼의 역할을 아래와 같이 presentational 속성, 컨테이너 속성별로 나눠볼 수 있다.

1. state에 따라 disabled를 변경한다. (container)

2. 클릭 이벤트를 처리한다. (container)

3. CSS 파일을 불러와 UI를 만든다. (present)

 

====>> UI를 담당하는 컴포넌트를 먼저 만든 후 =====>> 동작을 담당하는 컴포넌트를 만들어 본다.

 

 

여러가지 Functional 컴포넌트들을 어떻게 역할별로 컴포넌트를 분리해서 설계하는지 상세히 설명해 놓은 블로그가 있다.

jeonghwan-kim.github.io/dev/2020/01/28/component-design.html

컴포넌트의 역할 분리