[FE] Container, Presenter 패턴

Container, Presenter 패턴

한 페이지에서 기능과 화면 UI 코드를 다 쓰는 것이 아니라 분리해주는 것이 에러를 발견하기 쉽고 유지보수에 용이하다.

즉 JS와 JSX의 영역을 나눠서 파일을 나누면 각각 Container, Presenter로 나눌 수 있다.

예를 들어 게시판 페이지 파일을 분리한다고 하면 일반적으로 . _ -같은 구분자를 넣고 그 뒤에 container,presenter를 써서 명시한다.

board.container.js
board.presenter.js

이 둘은 부모 자식 관계로 보통 presenter를 container에서 import한 뒤, 합쳐져서 실행된다. 이때 props를 이용해서 변수,함수들을 연결해준다.

cf) emotion style이나 GraphQL API Query들도 또 다른 파일로 분리해주면 이후 코드가 길어질 때 에러 발견이나 분석이 쉬워진다.

cf) container/presenter 구조로 구성하는 것 외에도 atomic 디자인 패턴도 있다.