Presentational & Container 디자인 패턴

 

Presentational & Container 디자인 패턴은 React 애플리케이션을 구조화하는 데 사용되는 패턴으로, UI와 비즈니스 로직을 분리하여 더 깨끗하고 유지보수하기 쉬운 코드를 작성하는 데 도움을 줍니다. 이 패턴은 Dan Abramov에 의해 널리 알려졌습니다.

 

Presentational Components

 

Presentational 컴포넌트는 UI를 렌더링하는 데 집중하며, 주로 다음과 같은 특징을 가집니다:

1. Stateless (상태 없음):
   • 주로 자신의 상태를 가지지 않고, 부모 컴포넌트로부터 props를 받아서 렌더링합니다.
   • UI를 설명하는 데 필요한 모든 데이터를 props를 통해 받습니다.
2. No Side Effects (사이드 이펙트 없음):
   • 비즈니스 로직이나 데이터 페칭 등의 부작용이 없습니다.
   • 사용자 인터랙션 이벤트는 주로 부모 컴포넌트에서 처리됩니다.
3. Reusability (재사용성):
   • 다양한 컨텍스트에서 재사용할 수 있도록 설계됩니다.
   • 스타일과 레이아웃에 집중하여 여러 곳에서 쉽게 재사용할 수 있습니다.
4. Layout & Style Focus (레이아웃 및 스타일 집중):
   • 주로 스타일링, 레이아웃, 마크업 등을 처리합니다.

예제:

const PresentationalComponent = ({ title, onClick }) => (
  <div>
    <h1>{title}</h1>
    <button onClick={onClick}>Click me</button>
  </div>
);

 

Container Components

 

Container 컴포넌트는 애플리케이션의 비즈니스 로직과 데이터 페칭을 담당하며, 주로 다음과 같은 특징을 가집니다:

1. Stateful (상태 보유):
   • 자신의 상태를 관리하고, 필요한 경우 하위 컴포넌트에 상태를 props로 전달합니다.
2. Side Effects (사이드 이펙트):
   • 데이터 페칭, 이벤트 핸들링, API 호출 등 비즈니스 로직을 처리합니다.
3. Minimal Markup (최소한의 마크업):
   • 자체적으로는 거의 마크업을 포함하지 않고, 주로 Presentational 컴포넌트를 래핑합니다.
4. Data Management (데이터 관리):
   • Redux, Context API 등의 상태 관리 라이브러리와 주로 연동됩니다.

예제:

import React, { useState } from 'react';
import PresentationalComponent from './PresentationalComponent';

const ContainerComponent = () => {
  const [title, setTitle] = useState('Hello, World!');

  const handleClick = () => {
    setTitle('Button Clicked!');
  };

  return (
    <PresentationalComponent title={title} onClick={handleClick} />
  );
};

export default ContainerComponent;​

 

 

장점

1. Separation of Concerns (관심사의 분리):
   • UI와 비즈니스 로직을 분리하여 각각의 역할을 명확히 합니다.
   • 코드의 가독성과 유지보수성이 향상됩니다.
2. Reusability (재사용성):
   • Presentational 컴포넌트는 다양한 컨텍스트에서 재사용할 수 있습니다.
   • Container 컴포넌트는 다른 데이터 소스와 쉽게 연동할 수 있습니다.
3. Testability (테스트 용이성):
   • 비즈니스 로직과 UI를 분리하면, 각각을 독립적으로 테스트할 수 있습니다.
   • Presentational 컴포넌트는 주로 단위 테스트로, Container 컴포넌트는 통합 테스트로 검증할 수 있습니다.

 

단점

1. Boilerplate (보일러플레이트 코드 증가):
   • 컴포넌트를 분리하는 과정에서 코드가 늘어날 수 있습니다.
   • 작은 프로젝트에서는 과도한 분리로 인해 복잡성이 증가할 수 있습니다.
2. Complexity (복잡성 증가):
   • 복잡한 애플리케이션에서는 컴포넌트 간의 의존성이 높아져 관리가 어려울 수 있습니다.
   • 상태와 이벤트 핸들링 로직이 분산되어 추적하기 어려울 수 있습니다.

 

결론

Presentational & Container 디자인 패턴은 대규모 애플리케이션에서 관심사의 분리를 통해 코드의 유지보수성과 재사용성을 높이는 데 유용합니다. 그러나 작은 프로젝트에서는 과도한 분리가 오히려 복잡성을 증가시킬 수 있으므로, 프로젝트의 규모와 복잡성에 맞게 적절히 활용하는 것이 중요합니다.