Presentational and Container Components

유지보수와 재사용성을 고려하여 개발하는 방식

리액트에서 컴포넌트는 상태 / DOM / 이벤트 등을 모두 관리할 수 있는데, 이때 각각의 모든 컴포넌트에서 이러한 작업들이 처리될 경우 가독성이 떨어지고 컴포넌트간의 의존도가 높아질 경우 코드의 재사용이 불가능해지는 단점과 유지보수가 어려운 단점이 있다.

Presentational and Container Components Pattern을 이용해 코드의 재사용성을 높일 수 있다.
데이터 동작 로직이 포함되어있지않은 Presentational Component는 받아온 데이터를 화면에 출력하기만 할 뿐이므로 다른 컴포넌트와 관련되지않아 낮은 의존도를 가지게 되기 때문에 다양한 Container Component와 조합하여 재사용할 수 있다는 장점이 있다.
*layout Component로 활용하여 반복되는 마크업 작업을 줄일 수 있다.

또한 기능과 UI가 명확하게 분리되어 코드 구조에 대해 파악하고 이해하기 쉬워진다.

Presentational Components

• 주로 stateless(무상태)
  • 클라이언트와 서버 관계에서 서버가 클라이언트 상태를 보존하지 않는 것
    → 서버 확장성이 높아 대량의 트래픽 발생 시에도 대처할 수 있다.
    → 클라이언트 요청에 stateful 보다 상대적으로 더 많은 데이터가 사용 된다.
  • http 기본 특징
• 화면 구성(View)
• 내부에 Presentational Component 와 Container Component를 모두 가질 수 있고, DOM 마크업과 자체 스타일을 가진다.
• 데이터를 불러오거나 변경하는 작업 진행X
  • 데이터는 props를 통해서 받기만 한다
• UI 구현을 위한 상태(state)만 가진다
• 성능 최적화가 필요하지 않을 경우 Functional Component로 작성
• 가능한 작게 만든다?

Container Components

• 주로 stateful(상태유지)
  • 클라이언트와 서버 관계에서 서버가 클라이언트의 상태를 보존하여 클라이언트의 이전 요청과 다음 요청의 관계가 이어지는 것
• 데이터 동작 로직 구성(Action)
• 내부에 Presentational Component 와 Container Component를 모두 가질 수 있고, 전체를 감싸는 div 를 제외하고 자체적인 DOM 마크업이나 스타일을 가지지 않는다
• 데이터 또는 데이터 변경 동작을 다른 Presentational Component 와 Container Component 에게 제공한다
• Flux 의 Action 을 호출하는 작업을 작성하고 이 Callback들을 Presentational Component에게 넘겨준다
• 데이터를 저장하기 위한 상태(state)를 가진다
• 직접 작성되기 보다는 HOC(Higher-Order Components)로 부터 생성되는 경우가 많다