[02] Presentational & Container Pattern

몰랐지만 평소 개발할 때 React.js, Angular.js 에서 자주 쓰는 패턴이다.

 

간단하게 설명하면, Container Component (부모)에서 데이터를 관리하고, Presentational Component (자식)에서는 Container Component에서 받은 데이터를 기반으로 뿌려주는 역할을 하는 것 이다.

 

각 Component 별로 React-Redux 관점에서 정리하였을 때에는 아래와 같다.

• Presentational Component
  : Data 및 Callback은 Props로 전달 받아 사용하며, Redux의 영향을 받지 않고 Style(U/I) 에 집중할 수 있는 Component
  (쉽게 생각하면 Button을 만드는 Component로 생각하면 된다.)
  
  
• Container Component
  : Redux의 Action을 호출, Data Control 을 담당하는 Component이다.
  Data와 Callback Function을 Presentational Component로 전달하는 Component

조금 더 자세하게 표로 설명해보자면 아래와 같다.

	Presentational Component	Container Component
목적	Dom Mark-up, Style	Data fetching, State Update, Behavior Logic
Redux의 존재를 아는가	X	O
Data를 어떻게 받는가	from Props	from Redux State
Data를 어떻게 변경하는가	Invoke Callbacks from Props	Dispatch Redux Action

Redux에 비교하지 않았을 때도 이 패턴은 Angular.js에서도 쉽게 적용 가능하며, 사실 다들 알게모르게 쓰고 있지 않는 패턴이지 않을까 싶다.