TUTORIAL

컴파운드 컴포넌트 패턴

React 고급 컴포넌트 디자인 패턴. 유연하고 재사용 가능한 컴포넌트 API 설계 방법을 배웁니다.

럿지 AI 팀
2025-01-09
15분
컴파운드 컴포넌트 패턴

여러 개의 컴포넌트가 암묵적으로 상태를 공유하며
함께 동작하는 고급 React 디자인 패턴입니다.

// 사용 예시: HTML의 select/option과 유사
<Select>
  <Select.Trigger>선택하세요</Select.Trigger>
  <Select.Options>
    <Select.Option value="1">옵션 1</Select.Option>
    <Select.Option value="2">옵션 2</Select.Option>
  </Select.Options>
</Select>

패턴의 장점

유연한 API

사용자가 컴포넌트 구조를 자유롭게 조합 가능

Prop Drilling 해결

Context로 상태를 암묵적으로 공유

관심사 분리

각 서브 컴포넌트가 명확한 역할 담당

재사용성

다양한 상황에 맞게 커스터마이징 가능

구현 방법

const TabsContext = createContext(null);

function Tabs({ children, defaultValue }) {
  const [active, setActive] = useState(defaultValue);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

Tabs.List = function TabsList({ children }) {
  return <div className="tab-list">{children}</div>;
};

Tabs.Tab = function Tab({ value, children }) {
  const { active, setActive } = useContext(TabsContext);
  return (
    <button
      className={active === value ? 'active' : ''}
      onClick={() => setActive(value)}
    >
      {children}
    </button>
  );
};

Tabs.Panel = function TabPanel({ value, children }) {
  const { active } = useContext(TabsContext);
  return active === value ? <div>{children}</div> : null;
};

실제 활용 사례

Radix UIDialog, Dropdown, Accordion
Headless UIMenu, Listbox, Disclosure
Reach UITabs, Accordion, Combobox
Chakra UIModal, Drawer, Menu

패턴 비교

패턴장점단점
Compound유연한 구조초기 러닝커브
Render Props제어 역전중첩시 복잡
HOC로직 재사용Props 충돌

관련 태그

#Compound Components
#React
#Design Pattern
#컴포넌트
#API