[TIL]

Container Presenter Pattern

• 기본적으로 React 프로젝트를 진행하면서, 폴더 구조를 Container Component / Presenter Component로 나눠서 작업을 진행했다. 이렇게 나눠서 작업을 한 이유는 React의 장점인 재사용성을 높이고, 유지보수를 잘 하기 위해서이다.

Container Component

1. 어떻게 동작해야 할지를 책임진다.
2. 내부에 Presentational Component와 Container Component 모두를 가질 수 있고, 대게 DOM마크업과 자체 스타일을 가지지 않는다.
3. 데이터 및 데이터와 관련된 동작을 다른 Presentational Component와 Container Component에게 제공한다.
4. Flux 의 Action 을 호출하는 작업을 Container Component에서 작성하며, 이 Callback들은 다른 Presentational Component에게 넘겨준다.
5. 주로 데이터 저장소로 활용되며 상태(state)를 갖고 있는 경우가 많다.
6. 직접 작성되기 보다는 HOC(Higher-Order Components)로 부터 생성되는 경우가 많다.

Presentational Component

1. 어떻게 화면에 보여지는지를 책임진다.
2. 내부에 Presentational Component와 Container Component 모두를 가질 수 있고, 대게 DOM마크업과 자체 스타일을 가진다.
3. 나머지 부분에 대해 아무런 의존성을 가지지 않는다. 단독적인 Component 형태
4. 데이터를 불러오거나 변경하는 작업은 Presentational Component에서 작성하지 않는다.
5. state는 UI상태를 관리하기 위해서만 갖는다.
6. state, LifeCycle, 성능 최적화가 필요없는 경우라면 Functional Component로 작성한다.

위와 비교해서 Container / Component 로 구분 할 수도 있다.
여기서 Component 폴더 구조가 Present Component와 같은 역할을 하게 된다.