Compound Components란? 💡

Compound Components란? 💡

 

**Compound Components(컴파운드 컴포넌트)**는 React에서 유연하고 재사용 가능한 UI 컴포넌트를 설계하기 위한 패턴이에요. 이 패턴을 활용하면 컴포넌트 내부의 관계를 명시적으로 나타내고, 사용자가 더 직관적으로 컴포넌트를 구성할 수 있도록 도와줍니다.

 

쉽게 말해, 컴포넌트를 “상위-하위 관계”로 묶어서 동작하도록 설계하는 거예요. 그럼 Compound Components의 정의와 장점, 그리고 어떻게 사용하는지 알아볼까요? 😊

 

Compound Components의 정의

 

Compound Components는 컨테이너 컴포넌트와 여러 하위 컴포넌트가 함께 동작하도록 설계된 패턴이에요.

컨테이너 컴포넌트가 상태를 관리하고, 하위 컴포넌트는 이를 참조해 필요한 UI와 동작을 정의합니다.

 

🛠️ 사용 예시: Tab 컴포넌트

 

import React, { useState, createContext, useContext } from "react";

 

const TabContext = createContext();

 

const Tabs = ({ children }) => {

  const [activeTab, setActiveTab] = useState(0);

  return (

    <TabContext.Provider value={{ activeTab, setActiveTab }}>

      <div className="tabs">{children}</div>

    </TabContext.Provider>

  );

};

 

const TabList = ({ children }) => <div className="tab-list">{children}</div>;

 

const Tab = ({ children, index }) => {

  const { activeTab, setActiveTab } = useContext(TabContext);

  return (

    <button

      className={`tab ${activeTab === index ? "active" : ""}`}

      onClick={() => setActiveTab(index)}

    >

      {children}

    </button>

  );

};

 

const TabPanels = ({ children }) => {

  const { activeTab } = useContext(TabContext);

  return <div className="tab-panels">{children[activeTab]}</div>;

};

 

const TabPanel = ({ children }) => <div className="tab-panel">{children}</div>;

 

// 사용 예시

export default function App() {

  return (

    <Tabs>

      <TabList>

        <Tab index={0}>Tab 1</Tab>

        <Tab index={1}>Tab 2</Tab>

        <Tab index={2}>Tab 3</Tab>

      </TabList>

      <TabPanels>

        <TabPanel>Content 1</TabPanel>

        <TabPanel>Content 2</TabPanel>

        <TabPanel>Content 3</TabPanel>

      </TabPanels>

    </Tabs>

  );

}

 

🔍 코드 분석

1. Tabs: 상위 컴포넌트로 상태(activeTab)를 관리하고 하위 컴포넌트들에게 전달합니다.

2. TabList: 탭 버튼들을 그룹화하는 역할을 합니다.

3. Tab: 개별 탭 버튼으로, 클릭하면 activeTab 상태를 변경합니다.

4. TabPanels: 현재 활성화된 탭의 콘텐츠를 렌더링합니다.

5. TabPanel: 각 탭의 콘텐츠를 정의합니다.

 

왜 Compound Components를 사용할까?

 

1️⃣ UI 구성 요소 간의 관계를 명확히 표현

 

Tabs, TabList, TabPanels 같은 하위 컴포넌트들이 상위 컴포넌트와 밀접하게 연결된 관계임을 코드 구조상으로 명확히 드러낼 수 있어요.

 

2️⃣ 사용자 경험 개선

 

컴포넌트를 선언적으로 작성하게 만들어 사용자(다른 개발자) 입장에서 직관적이고 이해하기 쉽게 만듭니다.

 

3️⃣ 유연성 증가

 

사용자는 컴포넌트를 자유롭게 구성하거나 순서를 조정할 수 있어 더 다양한 UI를 구현할 수 있어요.

 

Compound Components를 설계할 때의 핵심 포인트

 

1️⃣ Context API 활용

 

상위 컴포넌트에서 상태를 관리하고, Context를 통해 하위 컴포넌트에 전달합니다. 이를 통해 컴포넌트 간 데이터 공유를 쉽게 할 수 있어요.

 

2️⃣ Props.children 사용

 

React의 props.children을 활용하면 사용자가 원하는 대로 하위 컴포넌트를 구성할 수 있어요.

 

3️⃣ 구성 요소 간 결합도 낮추기

 

각 하위 컴포넌트를 독립적으로 테스트 가능하도록 설계하세요. 이를 통해 유지보수성이 높아집니다.

 

Compound Components의 활용 사례

 

🌟 1. Accordion

 

<Accordion>

  <AccordionItem>

    <AccordionHeader>Header 1</AccordionHeader>

    <AccordionPanel>Content 1</AccordionPanel>

  </AccordionItem>

  <AccordionItem>

    <AccordionHeader>Header 2</AccordionHeader>

    <AccordionPanel>Content 2</AccordionPanel>

  </AccordionItem>

</Accordion>

 

🌟 2. Form

 

<Form>

  <FormField label="Username">

    <Input type="text" />

  </FormField>

  <FormField label="Password">

    <Input type="password" />

  </FormField>

</Form>

 

Compound Components를 사용할 때 주의할 점

1. 복잡도를 조절하세요

너무 많은 하위 컴포넌트를 만들면 관리가 어려워질 수 있어요. 적절한 추상화를 유지하는 것이 중요합니다.

2. Context 사용 시 최적화 필요

Context 값이 자주 변경되면 모든 하위 컴포넌트가 리렌더링될 수 있으니 React.memo와 같은 최적화 기법을 활용하세요.

3. 명확한 문서화

Compound Components 패턴은 설계가 복잡해질 가능성이 있으므로, 사용자(개발자)를 위한 명확한 문서화가 필수입니다.

 

결론

 

Compound Components는 UI 구성 요소 간의 관계를 명확히 하고, 재사용 가능한 컴포넌트를 설계할 수 있는 강력한 패턴이에요. Context API, props.children, 그리고 React의 컴포넌트 기반 설계 철학을 잘 활용하면 더욱 유연하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.

 

🌷전설의 개발자가 되어봅시당!🌷