Presentational and Container Component Pattern
1. Presentational and Container Component Pattern이란?
로직을 담당하는 Component와 UI를 보여주는 Component가 분리된 패턴입니다.
(기능과 UI에 대한 구분이 쉬워집니다.)
2. 장점
Presentational and Container Component Pattern으로 Component를 작성하면 기능과 UI 를 보다 이해하기 쉽게 만들 수 있습니다.
Container Component
Presentational Component
'책임'과 '역할'의 분리가 명확해집니다.
완전히 다른 곳으로부터 온 여러 상태(state) 라 할지라도, 이를 표현하기 위해 같은 Presentational Component 사용할 수 있는데 이때, 각 상태를 나타내는 Container Component 를 만들어 사용하기 때문에 책임과 역할의 분리가 명확해집니다.
Markup 작업이 편하다.
Layout Component를 추출하여 관리하다보면 Styling 작업의 반복을 줄일 수 있고, 뷰(Presenter)의 역할이 명확해지기 때문에 가독성이 높아진다고 볼 수 있습니다.
3. 단점
Presentional and Container Component Pattern은 계층구조가 깊어지기 때문에 작은 크기의 애플리케이션에서도 쉽게 과잉될 수 있습니다.
따라서 복잡한 로직을 가진 어플리케이션이 아니라면 추천하는 방법은 아닙니다.
Hooks를 이용하면 Presentional and Container Component Pattern 없이도 같은 결과물을 생성할 수 있습니다.
2. Presentational and Container Component Pattern로 진행한 이유?
처음 프로젝트를 시작할때에는 Atomic Design Pattern과 Presentional and Container Component Pattern 중에서 고민했지만 처음하는 프로젝트이다보니 로직을 담당하는 로직과 화면을 보여주는 Component를 분리하여 코드의 가독성을 높이고자 하였습니다.
또한 후에 다시한번 프로젝트를 되짚어 보게 되더라도 이해하기 쉽게 작성하기위해 Presentational and Container Component Pattern으로 진행하였습니다
참고
https://jongmin92.github.io/2019/02/10/Programming/object_oriented_facts_and_misunderstandings/
https://velog.io/@holim0/React-Design-Pattern
https://blog.bitsrc.io/implementing-the-container-pattern-using-react-hooks-f490a8492d05
