[React] Presentational & Container 디자인 패턴

티라노·2023년 11월 5일

Presentational & Container ?

Presentational & Container 디자인 패턴은 React나 다른 컴포넌트 기반 라이브러리를 사용하여 UI를 구축할 때 사용되는 패턴 중 하나입니다.
이 패턴은 컴포넌트의 역할을 분리하여 코드의 가독성과 재사용성을 향상시키는 데 도움을 줍니다.

Presentational Components (UI Components):

Presentational 컴포넌트는 주로 UI를 표시하고 스타일을 정의하며, 데이터나 비즈니스 로직을 처리하지 않습니다.
(1) 주로 함수형 컴포넌트로 작성되며, (2) 외부로 영향을 주지 않습니다. (3) 재사용이 가능하기 때문에 동일한 UI를 다양한 곳에서 사용할 수 있습니다.

import React from 'react';

const Button = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

export default Button;

Container Components (Smart Components):

Container 컴포넌트는 데이터 가져오기, 상태 관리 및 비즈니스 로직을 처리합니다(즉, 기능 중심의 코드)
주로 클래스형 컴포넌트로 작성되었으며, 요즘은 Hooks를 사용한 함수형 컴포넌트를 자주 사용합니다, 상태를 관리하고 생명주기 메서드를 사용할 수 있습니다.
Presentational 컴포넌트를 감싸고 필요한 데이터 및 콜백 함수를 전달하여 UI와 로직을 분리합니다.
Presentational 컴포넌트의 역할 (UI 마크업, 스타일)을 직접 하지 않고, 그것들에 정보와 동작을 props로 전달하여 사용합니다.

import React, { useState } from 'react';
import Button from './Button';  // Presentational 컴포넌트

const ButtonContainer = () => {
  const [count, setCount] = useState(0);

  const handleButtonClick = () => {
    setCount(count + 1);
  };

  return (
    <Button label={`Clicked: ${count}`} onClick={handleButtonClick} />
  );
};

export default ButtonContainer;

예시를 보면, 함수형 컴포넌트 ButtonContainer는 상태 관리를 위해 useState Hook을 사용하고, UI 컴포넌트 Button를 감싸고 필요한 데이터와 콜백 함수를 전달하고 있습니다.

이러한 디자인 패턴을 사용하면 UI 컴포넌트와 비즈니스 로직을 분리하여 코드를 더 쉽게 관리하고 재사용할 수 있습니다.

즉, Presentational 컴포넌트는 UI에 중점을 두며 Container 컴포넌트는 데이터 및 로직에 중점을 두므로 코드의 가독성과 유지 관리가 더 용이해집니다.

관심사의 분리

리액트에서 '관심사의 분리'는 소프트웨어 디자인 원칙 중 하나인 '단일 책임 원칙 (Single Responsibility Principle, SRP)'을 적용하는 개념입니다.
이 원칙은 각 컴포넌트나 모듈이 하나의 주요 역할 또는 책임을 가져야 한다는 아이디어를 기반으로 합니다.
'관심사의 분리'를 리액트에서 적용하면 코드의 가독성, 유지 보수성 및 재사용성을 향상시킬 수 있습니다.

컴포넌트 분리:

관심사의 분리를 위해 UI와 비즈니스 로직을 분리하는 것이 중요합니다.
UI Components (Presentational Components)는 주로 UI를 렌더링하고 스타일을 관리합니다.
Container Components는 데이터 가져오기, 상태 관리 및 비즈니스 로직을 처리합니다.