[React] Container/Presentational Pattern

Enforce separation of concerns by separating the view from the application logic

container-presentational 이란 보여지는 부분과 로직이 수행되는 부분을 나누는 디자인 패턴을 말한다.
로직과 view를 나눔으로써 가독성을 높이고 유지보수성을 높인다.

추가적으로 presenter에서 사용하게될 style을 분리하면 container-presenter-styles 과같이 분리하여 기능-프리젠터-스타일 각각을 관리하기 편해진다.

Container part

Container 부분에서는 state를 직접관리하고 웹페이지 필요한 기능들을 만든다. 만든 state와 기능들은 Presenter의 props로 지정해준다.

Presentational part

Presenter 부분에서는 JSX로 마크업들을 만들어 화면을 구성한다. props로 받아온 것들을 태그 속성으로 이용한다.

cons

현재 웹개발에 사용되는 다양한 디자인 패턴이 있지만 초보자가 공부하기 쉬운 container presenter 패턴으로 웹페이지를 만들어 보았다. 훅의 등장으로 container-presenter의 사용성이 떨어진다고 하지만 디자인과 기능을 분리해서 관리하는 개념은 장르를 불문하고 새로운 시스템 구성시 언제나 고려해볼만한 컨셉이라고 생각한다.