📌 intro

디자인 패턴 에서는 단일 책임 원칙(Single Responsibility Principle; SRPP), 즉 하나의 모듈은 하나의 기능만 담당해야 한다는 원칙을 준수하기 위해 관심사 분리(Seperation of Concerns; SoC)를 하게 되는데, 이를 어떻게 분리하는 지를 다룬다.

아는 디자인 패턴이라곤 atomic design pattern 뿐이고, 최근에 test code 작성에 대해 공부하기 시작하면서, test를 위한 기능부분과 ui부분의 분리가 필요하다고 생각하였다.
그래서 기능과 ui가 분리시켜 유지 보수 및 테스트 코드를 작성하기 위한 좋은 환경을 만드는 것에 대해 좀 더 알아보고 싶었다.

📌 presentational & container 디자인 패턴이란?

• 로직을 수행하는 컴포넌트와, markup을 통해 ui 를 보여주는 컴포넌트의 분리가 이루어진 패턴
• 같은 state 를 다른 container에게 props 내림으로 상태를 공유할 수 있다.
• 로직수행, markup이 다른 컴포에서 하므로, 유지보수가 매우 용이하며, 쉽고, 재사용성이 뛰어나다. 특히나 markup 변경에 매우 유연하다.
• 동일한 markup, container layout 등을 반복해서 작성하지 않아도 된다.

✔️ presentational component

• ui 와 관련된 component
• state를 직접 조작하지 않으며, container component로부터 받은 props를 통해 로직을 구현한다.
• 그로 인해, useState, useCallback, 등과 같이 state 관련된 훅이 하나도 없다.
• 상태를 가진다 하더라도 데이터에 관한 것이 아닌 ui 상태에 관한 것이다.

✔️ container component

• 어떻게 동작하는지 , 어떤 로직을 수행하는지 관련이 있다.
• 일반적으로 wrapping div를 제외하고 markup 이나 스타일을 사용하지 않는다.
• 데이터와 데이터 조작에 관한 함수를 만들고 present component 에 제공한다.

👉

단 최근에는 container component의 custom hook으로의 대체와 명확하게 container와 presentational component의 구분에 대한 불필요성이 대두되어 재사용성과 view와 로직의 구분이라는 대명제만 지킨 상태로 component를 구성한다.

📌 References

• https://velog.io/@inwoong100/React-%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%A8%ED%84%B4-Presentational-Container-VAC%ED%8C%A8%ED%84%B4
• https://www.jh-blog-js.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%A8%ED%84%B4-1-container-presenter-pattern
• https://velog.io/@peacesong/Presentational-and-Container-Pattern