애플리케이션을 개발하다 보면 서로 상태를 공유하고 함께 동작해야 하는 컴포넌트들을 자주 접하게 된다. 컴파운드 컴포넌트 패턴(Compound Component Pattern)은 여러 컴포넌트들이 모여 하나의 완성된 동작을 수행할 수 있도록 설계하는 디자인 패턴이다. 해당 글에서는 컴파운드 컴포넌트의 개념과 Context API, React.Children.map를 활용한 구현 방법에 대해 다룬다.

개념

Compound 패턴의 대표적인 예시는 HTML의 <select>와 <option> 태그이다.
<option>은 단독으로 사용되지 않고, <select> 내부에서 상위 요소가 관리하는 상태를 공유하며 렌더링된다.

이처럼 부모 컴포넌트가 상태를 관리 하고, 자식 컴포넌트들이 해당 상태를 공유 해 각자의 UI를 구성하는 구조를 Compound 패턴이라고 한다.

일반적인 방식과 차이

일반적인 방식(Explicit Props)으로 구현한다면 부모 컴포넌트가 필요한 상태와 이벤트를 props로 모두 명시적으로 전달 하는 방식이다.

<Select open={isOpen} options={['Edit', 'Delete']} onSelect={handleSelect} />

이 방식은 구조가 단순하여 초기 구현이 빠르지만, 컴포넌트가 복잡해질수록 props 의존성이 강해져 내부 로직이 많아지고 정해진 options 데이터 구조 안에서만 렌더링해야 하므로 자유도가 떨어진다.

반면, Compound 패턴을 사용하게 되면 자식 컴포넌트들을 부모의 정적 속성(Static Property) 으로 정의하고, 부모가 제공하는 공유 상태(Context) 를 기반으로 서로 협력하게 된다.

<Select open={isOpen} onSelect={handleSelect}>
  <Select.Option value="edit">Edit</Select.Option>
  <Select.Option value="delete">Delete</Select.Option>
</Select>

Select.Option과 같은 형태로 구조화하여 컴포넌트 간의 종속 관계를 명확히 나타낼 수 있으며, 각 Option은 부모로부터 상태를 전달받아 렌더링되므로 개별적으로 props를 넘길 필요가 없다.

자식 컴포넌트 사이에 다른 HTML 태그를 넣거나 순서를 바꾸는 등 자유도가 올라가며, 부모 컴포넌트의 코드를 수정하지 않고도 새로운 컴포넌트를 조합하여 기능 확장하기에도 유리하다.

Context API 사용한 구현

구현 전 구성 요소는 아래와 같다.

	역할 설명
Parent Component	상태의 소유 주체로서 공통 상태와 제어 로직을 관리
Context	props drilling 없이 값을 공유하기 위한 전달 메커니즘
Child Component	전달된 값을 참조하여 UI를 렌더링

Compound 패턴의 핵심은 자식 컴포넌트들이 부모의 open 상태나 toggle 함수를 명시적인 Props 없이도 알고 있어야 한다는 점이다.
이를 위해 React Context를 사용하며, 부모가 제공하는 Context Provider를 통해 자식들이 자유롭게 상태에 접근하는 구조이다.

import React, { createContext, useState, useContext } from 'react';
const FlyOutContext = createContext(); // 상태를 공유할 Context를 생성

// 부모 컴포넌트
function FlyOut({ children }) {
  const [open, setOpen] = useState(false);
  const toggle = () => setOpen(!open);

  return <FlyOutContext.Provider value={{ open, toggle }}>{children}</FlyOutContext.Provider>;
}

// 자식 컴포넌트
function Toggle() {
  const { open, toggle } = useContext(FlyOutContext);
  return <div onClick={toggle}>{open ? '닫기' : '열기'}</div>;
}

function List({ children }) {
  const { open } = useContext(FlyOutContext);
  return open ? <ul>{children}</ul> : null;
}

function Item({ children }) {
  // ...
}

// 하위 컴포넌트들을 부모의 속성으로 할당
FlyOut.Toggle = Toggle;
FlyOut.List = List;
FlyOut.Item = Item;

export default FlyOut;

위에서 만든 컴포넌트를 사용하게 되면 아래와 같이 사용할 수 있다.

import FlyOut from './FlyOut';

export default function App() {
  return (
    <FlyOut>
      <FlyOut.Toggle />
      <FlyOut.List>
        <FlyOut.Item>Edit</FlyOut.Item>
        <FlyOut.Item>Delete</FlyOut.Item>
      </FlyOut.List>
    </FlyOut>
  );
}

구현 예제

React Children.map

Compound 패턴을 구현하는 또 다른 기술적 방법은 React.Children.map과 React.cloneElement를 조합하는 것이다.
이 방식은 부모 컴포넌트가 자식 컴포넌트들을 직접 순차적으로 확인하며 필요한 Props를 주입하는 방식이다.

function FlyOut(props) {
  const [open, setOpen] = React.useState(false);
  const toggle = () => setOpen(!open);

  return (
    <div>
      {React.Children.map(props.children, child =>
        // 각 자식 엘리먼트를 복제하며 새로운 Props(open, toggle)를 합침
        React.cloneElement(child, { open, toggle })
      )}
    </div>
  );
}

하지만, 이 방식은 직계 자식(Direct Children)에게만 props가 전달된다는 치명적인 단점이 있다.
자식 컴포넌트를 div로 한 번만 감싸도 동작이 멈추게 된다.

만약 레이아웃을 위해 자식 컴포넌트를 <div>나 다른 컴포넌트로 한 번 더 감싸게 되면, React.Children.map은 해당 div를 자식으로 인식할 뿐, 그 안의 실제 하위 컴포넌트에게는 Props를 전달하지 못한다. 마크업 구조를 자유롭게 바꿀 수 없다는 뜻이며, 이는 Compound 패턴의 핵심 장점인 유연한 UI 배치를 저해하는 요소가 된다.

컴파운드 컴포넌트 패턴 (Compound Pattern)