🧩 Compound Components란?

📌 개념정리

React 컴포넌트는 사실 함수다.
그리고 JavaScript에서는 함수도 객체처럼 속성을 가질 수 있다!

예시

function sayHi() {
  console.log("hi");
}

sayHi.language = "Korean";
console.log(sayHi.language); // Korean

이 개념을 React에 응용하면 다음처럼 사용할 수 있다!

function Dropdown({ children }) {
  return <div>{children}</div>;
}

Dropdown.Trigger = function Trigger() {
  return <button>열기</button>;
};

Dropdown.Item = function Item({ children }) {
  return <div>{children}</div>;
};

이제 위 예시를 바탕으로 아래처럼 사용할 수 있다.

<Dropdown>
  <Dropdown.Trigger />
  <Dropdown.Item>항목</Dropdown.Item>
</Dropdown>

-> 이 방식을 바로 Compound Component 패턴이라고 부른다.

---

❓ 왜 써야 할까?

❌ 사용하지 않았을 때 (전통적인 방식)

function Dropdown() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>{open ? "닫기" : "열기"}</button>
      {open && <div>항목</div>}
    </div>
  );
}

이 방식은 단순하긴 하지만, 다음과 같은 문제가 있다.

• UI 구조가 고정됨 → 순서나 조합 바꾸기 어려움
• 더 많은 구성 요소가 생기면 컴포넌트가 커짐 (확장성 떨어짐)
• 다른 파일에서 버튼이나 항목을 따로 재사용하기 어려움

---

✅ Compound Component 사용 시 장점

• UI 조합 유연: 구조나 순서를 자유롭게 조정 가능
• 상태 공유: Context로 자식들이 부모의 상태를 공유함
• 코드 구조가 깔끔하고 재사용 가능

⚙️ 실제 사용 예시 (Context + Compound Components)

const DropdownContext = createContext();

function Dropdown({ children }) {
  const [open, setOpen] = useState(false);
  return (
    <DropdownContext.Provider value={{ open, setOpen }}>
      <div>{children}</div>
    </DropdownContext.Provider>
  );
}

Dropdown.Trigger = function Trigger() {
  const { open, setOpen } = useContext(DropdownContext);
  return <button onClick={() => setOpen(!open)}>{open ? "닫기" : "열기"}</button>;
};

Dropdown.Item = function Item({ children }) {
  const { open } = useContext(DropdownContext);
  return open ? <div>{children}</div> : null;
};

이제 아래처럼 사용할 수 있다.

<Dropdown>
  <Dropdown.Trigger />
  <Dropdown.Item>내용</Dropdown.Item>
</Dropdown>

Dropdown.Trigger, Dropdown.Item은 각각 Dropdown 안에서만 동작하게 설계된 하위 컴포넌트이다.

🧩 {children} 이란?
React에서 {children}은 컴포넌트 태그 안에 있는 내용을 가리킨다.

<Dropdown>
  <Dropdown.Trigger />
  <Dropdown.Item>내용</Dropdown.Item>
</Dropdown>

이 경우, <Dropdown> 컴포넌트의 props.children에는 <Dropdown.Trigger />와 <Dropdown.Item />이 들어간다. 즉, Dropdown 컴포넌트 안에서 이 children을 렌더링해주면 그 안의 내용이 화면에 나타난다.

❗️주의: Context 없이 단독 사용 시 동작 안 함

<Dropdown.Trigger /> // ❌
<Dropdown.Item>호이초이</Dropdown.Item> // ❌

왜냐하면 내부에서 useContext(DropdownContext)를 사용하고 있기 때문에, 반드시 <Dropdown> 안에 있어야 정상 동작한다.

---

🧠 Headless 방식이란?

Headless란 UI를 제공하지 않고, 오직 로직과 상태만 관리하는 방식을 말한다.

function useToggle() {
  const [on, setOn] = useState(false);
  const toggle = () => setOn((prev) => !prev);
  return { on, toggle };
}

이건 로직만 담긴 훅이다. UI는 별도로 만들고, 원하는 방식으로 구성할 수 있다!

✅ Compound Component + Headless = 최강 조합

• 상태 관리: Context에서 담당
• UI 구성: 자유롭게 조합 가능
• 유연성 + 재사용성 + 확장성 모두 확보!

✅ 마무리

항목	설명
Compound Component	컴포넌트를 객체처럼 구성하여 하위 컴포넌트를 속성으로 붙임
장점	재사용성, 상태 공유, 가독성, 유연성 향상
핵심 기술	Context API + JS의 함수는 객체라는 성질
Headless	로직과 UI 분리, 커스터마이징에 강함
children	부모 컴포넌트 안에서 자식 컴포넌트를 유연하게 렌더링하게 해주는 특별한 prop

Compound Components는 상태 공유가 필요한 컴포넌트를 만들 때 강력한 패턴이다.