[React] Presentational vs Container Component

React를 조금 더 심도 있게 들어가거나, 

 

조금 큰 규모의 component를 작성하다 보면 

 

Presentational Component와 Container Componenet에 대해 접하게 된다. 

 

막상 들으면 "뭐지?" 하고 와닿지는 않는데, 알고 보면 아주 쉬운 개념이다. 

 

아래 블로그에 자세히 설명이 되어 있어 번역해 옮겨본다. 

 

출처: https://flaviocopes.com/react-presentational-vs-container-components/

React: Presentational vs Container Components

 

The difference between Presentational and Container Components in React

 

리엑트 컴포넌트는 크게 2가지로 나뉜다: presentational component와 container component.

 

각각의 컴포넌트는 저마다의 특징이 있다. 

 

Presentational component는 주로 마크업을 생성하는데 관여한다. 

 

마크업 생성에 필요한 것을 제외하고 어떠한 state도 다루지 않는다. 

 

Container componenet는 주로 "backend" 작동을 수행한다. 

 

여러 sub-컴포넌트의 state를 관리하거나 여러 presentational component를 감싸기도 한다. 혹은 Redux와 교신하기도 한다. 

 

간단하게 분류해서 설명하자면, presentational component는 겉에 보이는 생김새와 연관되고, container component는 작동과 연관된다.