React 컴포넌트 설계: Compound Component 패턴 완전 정복

안녕하세요! 복잡한 UI를 React로 구현하다 보면, 코드 베이스가 커지고 재사용성은 떨어지며 유지보수가 어려워지는 경험을 다들 해보셨을 겁니다.

오늘은 이런 문제들을 우아하게 해결해 줄 Compound Component 패턴에 대해 알아보겠습니다.

1. 컴포넌트 설계가 중요한 이유

React 개발에서 프로젝트가 커지면 다음 문제들에 부딪히게 됩니다:

• Prop Drilling: 부모에서 자식으로 계속 props를 전달해야 하는 상황
• 강한 결합: 컴포넌트들이 서로의 내부 구현을 너무 많이 알고 있는 경우
• 유연성 부족: 원하는 대로 UI 구조를 변경하기 어려운 경우

2. Compound Component란?

여러 개의 컴포넌트가 하나의 단일 컴포넌트처럼 함께 동작하면서도, 각 컴포넌트의 렌더링 로직을 외부에서 제어할 수 있도록 해주는 패턴입니다.

1<Tabs initialActiveTab="tab1">
2  <Tabs.Tab id="tab1">탭 1</Tabs.Tab>
3  <Tabs.Tab id="tab2">탭 2</Tabs.Tab>
4  <Tabs.Panel id="tab1">탭 1의 내용</Tabs.Panel>
5  <Tabs.Panel id="tab2">탭 2의 내용</Tabs.Panel>
6</Tabs>

3. 구현 방법

Step 1: Context 생성

1import { createContext, useContext, useState, useMemo } from 'react';
2
3const TabsContext = createContext(null);
4
5const useTabsContext = () => {
6  const context = useContext(TabsContext);
7  if (!context) {
8    throw new Error('Tabs.* must be within <Tabs>');
9  }
10  return context;
11};

Step 2: 부모 컴포넌트

1const Tabs = ({ initialActiveTab, children }) => {
2  const [activeTab, setActiveTab] = useState(initialActiveTab);
3
4  const value = useMemo(() => ({
5    activeTab,
6    setActiveTab,
7  }), [activeTab]);
8
9  return (
10    <TabsContext.Provider value={value}>
11      {children}
12    </TabsContext.Provider>
13  );
14};

Step 3: 자식 컴포넌트

1const Tab = ({ id, children }) => {
2  const { activeTab, setActiveTab } = useTabsContext();
3  
4  return (
5    <button
6      onClick={() => setActiveTab(id)}
7      className={activeTab === id ? 'active' : ''}
8    >
9      {children}
10    </button>
11  );
12};
13
14const Panel = ({ id, children }) => {
15  const { activeTab } = useTabsContext();
16  return activeTab === id ? <div>{children}</div> : null;
17};
18
19// 부모에 자식 컴포넌트 연결
20Tabs.Tab = Tab;
21Tabs.Panel = Panel;

4. 주요 장점

1. 높은 유연성: 컴포넌트 순서와 위치를 자유롭게 구성
2. 강력한 재사용성: 다양한 디자인에 맞춰 활용 가능
3. 코드 가독성: 선언적 API로 읽기 쉬운 코드
4. 관심사의 분리: 상태 관리와 UI 렌더링 분리

5. 언제 사용할까?

• Select/Option, Accordion, Form/Field 등 여러 컴포넌트가 함께 동작할 때
• Prop Drilling이 심각해졌을 때
• 사용자가 레이아웃을 자유롭게 제어해야 할 때

마무리

Compound Component 패턴은 복잡한 UI를 유연하고 재사용 가능하게 만드는 강력한 도구입니다. 여러분의 React 개발에 큰 도움이 되기를 바랍니다!