Compound component

Compound component란?

Compound component는 React 컴포넌트 패턴 중 하나로, 여러 개의 서로 관련된 하위 컴포넌트들을 함께 그룹화하여 논리적인 단위로 사용할 수 있는 패턴입니다. Compound component 패턴을 사용하면 관련된 컴포넌트들을 캡슐화하고, 이들 간의 상호작용과 관계를 강화할 수 있습니다.

부모 컴포넌트와 하위 컴포넌트 역할

일반적으로 Compound component 패턴은 부모 컴포넌트와 하위 컴포넌트들 간의 상태와 동작을 공유하면서 각각 아래의 역할을 수행합니다.

1. 부모 컴포넌트가 논리적인 컨테이너 역할
2. 하위 컴포넌트들은 그 안에서 특정 역할을 수행

이러한 구조는 부모 컴포넌트로부터 전달되는 속성(props)을 공유하면서, 서로의 상태를 업데이트하거나 이벤트를 처리할 수 있게 합니다.

예시

Compound component 패턴은 주로 UI 컴포넌트 라이브러리나 컴포넌트 API 디자인에서 활용됩니다. 예를 들어, 탭(Tabs) 컴포넌트가 있다면 탭 그룹(TabGroup) 컴포넌트가 부모 컴포넌트 역할을 하고, 각 탭 항목(TabItem)이 하위 컴포넌트로 존재하는 형태입니다. 이렇게 하면 탭 그룹 컴포넌트에서 탭 항목들의 활성 상태 관리, 이벤트 처리 등을 통합적으로 수행할 수 있습니다.

import React, { useState } from 'react';

// Tabs 컴포넌트 정의
const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  // 자식 컴포넌트에 activeTab 상태와 handleTabClick 이벤트를 전달
  const tabs = React.Children.map(children, (child, index) => {
    return React.cloneElement(child, {
      activeTab: activeTab,
      onTabClick: handleTabClick,
    });
  });

  return (
    <div>
      <div className="tabs">
        {tabs}
      </div>
      <div className="tab-content">
        {children[activeTab]}
      </div>
    </div>
  );
};

// Tab 컴포넌트 정의
const Tab = ({ label, activeTab, onTabClick }) => {
  const isActive = activeTab === label;

  return (
    <div
      className={`tab ${isActive ? 'active' : ''}`}
      onClick={() => onTabClick(label)}
    >
      {label}
    </div>
  );
};

// 사용 예시
const App = () => {
  return (
    <Tabs>
      <Tab label="Tab 1">
        <p>Content for Tab 1</p>
      </Tab>
      <Tab label="Tab 2">
        <p>Content for Tab 2</p>
      </Tab>
      <Tab label="Tab 3">
        <p>Content for Tab 3</p>
      </Tab>
    </Tabs>
  );
};

export default App;

이점

Compound component 패턴을 사용하면 컴포넌트 계층 구조를 더 명확하게 구성하고, 재사용성과 유지보수성을 향상시킬 수 있습니다. 또한, 사용자가 Compound component를 더 직관적이고 유연하게 사용할 수 있는 API를 제공할 수 있습니다.