1. Presentational & Container 디자인 패턴이란?
- 로직을 수행하는 컴포넌트와, markup을 통해 ui를 보여주는 컴포넌트가 분리된 패턴입니다.
그에 따라 앱의 기능과 ui에 대한 구분이 쉬워집니다. - 같은 state를 다른 container에게 props 내림으로 상태를 공유 할 수 있습니다.
- 로직수행, markUp이 다른 컴포넌트에서 하기 때문에 유지보수가 쉽고, 재사용성이 뛰어납니다. 특히, markup 변경에 매우 유연합니다.
- 동일한 마크업, 컨테이너 레이아웃 (header, footer)는 반복해서 작성하지 않아도 this.props.children 구현 할 수 있습니다.
리액트를 사용하고 redux, recoil과 같은 상태관리 라이브러리를 같이 사용하다보면 필연적으로 마주하는 디자인 패턴이 이 Presentational & Container 디자인 패턴이다. custom hook이 나오면서 이 디자인 패턴의 container가 custom hook으로 대체될 수 있어 이전과 같은 P&C Pattern이 사용되지는 않는다. 하지만 명확한 것은 데이터의 처리와 view를 분리시키려는 노력의 산물이 이 디자인 패턴이라는 것이다.
1-1. Presentational component
- UI와 관련된 component
- state를 직접 조작하지 않으며 container component에서 받은 props를 통해 로직을 구현합니다.
- 그에 따라 useState, useCallback, dispatch등 state관련된 훅이 하나도 없습니다.
- 상태를 거의 가지지 않으며, 상태를 가진다면 데이터에 관한것이 아닌 ui 상태에 관한 것입니다.
종종, this.props.children을 통해 컴포넌트가 렌더됩니다.
1-2. Container component
- 어떻게 동작하는지, 어떤 로직을 수행하는지에 관련있습니다.
- markup을 사용하지 않습니다. 스타일을 사용하지 않습니다.
- 데이터와 데이터 조작에 관한 함수를 만들고 present component에 제공합니다.
Presentation & Container 디자인 패턴 특징
- 컴포넌트간 의존도가 낮고, Presentation 컴포넌트를 재사용할 수 있습니다.
- 컴포넌트별 역할이 명확하여 코드 구조를 이해하기 쉽습니다.
- state를 여러 컴포넌트에 props로 전달하여 상태를 공유할 수 있습니다.
