Presentational & Container 디자인 패턴이란?

웹 애플리케이션 개발에서 컴포넌의 역할 분리는 코드의 가독성, 유지보수성, 재사용성을 높이는 데 매우 중요합니다. Presentational & Container 디자인 패턴은 이러한 컴포넌트 분리의 핵심 원칙을 제시하며, UI와 데이터 로직을 분리하여 개발 효율성을 극대화하는 디자인 패턴 입니다.

Prensentational 컴포넌트

이 컴포넌트는 UI를 담당하는 순수 함수 컴포넌트입니다.

주요 특징으로는:

• UI 표현: 주어진 데이터를 기반으로 UI를 렌더링하는데 집중합니다
• 데이터 의존성: 상위 컴포넌트로부터 props를 통해 데이터를 전달받아 사용합니다
• 상태 관리 최소화: UI 관련 상태외에는 내부 상태를 가지지 않습니다
• 재사용성: 다양한 컨테이너 컴포넌트에서 재사용될 수 있도록 설계합니다
• 순수 함수: 동일한 입력에 대해 항상 동일한 출력을 반환아며, 외부 상태에 의존하지 않습니다

Container 컴포넌트

이 컴포넌트는 데이터 로직을 담당하며, Presentational 컴포넌트에게 필요한 데이터를 제공합니다.

주요 특징으로는:

• 데이터 로직 처리: API 호출, 데이터 가공, 상태관리 등 데이터 관련 로직을 처리합니다
• Presentational 컴포넌트 연결: 데이터를 Presentational 컴포넌트에게 props로 전달합니다
• 상태관리: 애플리케이션의 상태를 관리하고, 필요한 경우 상태를 업데이트 합니다.
• 재사용성: 특정 데이터 로직을 공유 하는 여러 Presentational 컴포넌트에서 재사용될 수 있습니다.

Presentational & Container 패턴의 장점

• 관심사 분리: UI와 데이터 로직을 분리하여 각 컴포넌트의 역할을 명확히 합니다.
• 코드 재사용성 향상: Presentational 컴포넌트를 다양한 컨테이너 컴포넌트에서 재사용할 수 있습니다.
• 테스트 용이성 증대: 각 컴포넌트의 역할이 명확하므로 단위 테스트를 쉽게 작성할 수 있습니다.
• 유지보수성 향상: 코드 변경 시 영향 범위를 최소화하여 유지보수를 용이하게 합니다.