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로 전달하여 상태를 공유할 수 있습니다.