컴파운드 컴포넌트(Compound Components)는 여러 컴포넌트가 상태를 공유하며 협력해 하나의 기능을 이루는 패턴이다. HTML(HyperText Markup Language)의 select와 option처럼, 부모가 상태를 들고 자식들은 각자 한 역할만 맡는다.
<Select onSelect={setFruit}>
<Select.Trigger>선택하세요</Select.Trigger>
<Select.Content>
<Select.Item value="apple">사과</Select.Item>
<Select.Item value="banana">바나나</Select.Item>
</Select.Content>
</Select>- 부모(
Select)가 열림 여부·선택값을 Context로 내려 주고, 자식들이 그 Context를 읽는다. 예전에는React.Children.map+cloneElement로 props를 주입했지만, 직계 자식에게만 닿고 중간에 감싸면 깨져서 지금은 Context 방식이 일반적이다 - 장점: 사용하는 쪽이 순서와 구성을 자유롭게 바꿀 수 있다. 수십 개의 설정 prop을 받는 대신 조합으로 표현한다. Radix·shadcn/ui 같은 헤드리스 UI 라이브러리가 이 패턴을 쓴다(cn 유틸리티(clsx·tailwind-merge·cva))
- 설정 객체 하나로 화면을 만드는 설정 기반 UI와는 반대 방향의 선택이다
컴포지트 패턴과의 차이
컴포지트 패턴은 폴더 안에 폴더가 들어가듯 개별 객체와 그 묶음을 같은 방식으로 다루는 재귀적 트리 구조다. 컴파운드는 서로 다른 역할의 형제들이 상태를 공유하는 구조다. 중첩 메뉴처럼 둘을 함께 쓰는 경우도 많다.
비슷한 합성 기법은 Render Props 패턴, 역할 분리 관점은 Presentational·Container 컴포넌트.