Presentationl & Container 디자인 패턴

 

Presentational & Container 디자인 패턴

Presental & Container 디자인 패턴이란, 로직을 수행하는 컴포넌트와 마크업을 통해 UI를 보여주는 컴포넌트가 분리된 패턴을 의미한다. 이 패턴이 가지는 특징은 아래와 같다.

 

• 앱의 기능과 UI에 대한 구분이 쉬워진다.
• 같은 state를 다른 container에게 props로 내려 상태를 공유할 수 있다.
• 로직 수행, 마크업을 다른 컴포넌트에서 하기 때문에 유지보수가 쉽고, 재사용성이 뛰어나다.
  (특히 마크업 변경에 매우 유연하다)
• 동일한 마크업, 컨테이너 레이아웃(header, footer)는 반복해서 작성하지 않아도 this.props.children 으로 구현할 수 있다.

 

Presental 컴포넌트

• 사용자가 직접 보고, 조작하는 컴포넌트(UI와 관련)
• state를 직접 조작하지 않으며, container 컴포넌트가 내려준 prop의 함수에 의해 state를 변경한다.
  그에 따라 useState, useCallback, 등 state 관련 훅이 없다.
• 상태를 거의 가지지 않고, 상태를 가진다면 데이터에 관련한 것이 아니라 UI 상태에 관련한 것이다. (stateless)
• 종종, this.props.children을 통해 컴포넌트가 렌더된다.

 

Container 컴포넌트

• 어떻게 동작하는지, 어떤 로직을 수행하는지에 관련된 컴포넌트
• 마크업을 사용하지 않으며, 스타일을 사용하지 않는다.
• 주로 상태를 가지고 있다. (stateful)
• 데이터와 데이터 조작에 관한 함수를 만들고 현재 컴포넌트에 제공한다.