2nd/10_Wiki/Topics/Frontend/Component-Composition.md

---
id: wiki-2026-0508-component-composition
title: Component Composition (React)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [React Composition, Compound Components]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [react, composition, component-design, frontend]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript
  framework: React 19
---

# Component Composition (React)

## 매 한 줄
> **"매 inheritance 의 X, composition 의 O"**. React 의 design principle — UI 를 작은 composable component 로 분해, props.children + slot pattern + compound API 로 매 flexible 한 reuse 달성.

## 매 핵심

### 매 핵심 idioms
- `props.children` (default slot).
- Named slots (props as render fn / ReactNode).
- Compound components (parent + children share context).
- Render props / function-as-children.
- Polymorphic `as` prop.
- `React.cloneElement` / `Slot` (Radix).

### 매 vs Inheritance
- React 매 class extension 의 X — 매 wrapper component.
- 매 `<Parent>` + `<Parent.Item>` style 매 implicit relation expression.

### 매 응용
1. Modal / Dialog (Header / Body / Footer slots).
2. Form fields (Field / Label / Input / Error).
3. Menu / Combobox (Radix-style headless).
4. Layout primitives (Stack, Grid).

## 💻 패턴

### Children as default slot
```tsx
function Card({ children }: { children: React.ReactNode }) {
  return <div className="card">{children}</div>;
}
// <Card><h2>Hi</h2><p>Body</p></Card>
```

### Named slots via props
```tsx
type Props = {
  header?: React.ReactNode;
  footer?: React.ReactNode;
  children: React.ReactNode;
};

function Page({ header, footer, children }: Props) {
  return (
    <>
      {header && <header>{header}</header>}
      <main>{children}</main>
      {footer && <footer>{footer}</footer>}
    </>
  );
}
```

### Compound components with Context
```tsx
import { createContext, useContext, useState } from 'react';

const TabsCtx = createContext<{ active: string; set: (v: string) => void } | null>(null);

function Tabs({ defaultValue, children }: { defaultValue: string; children: React.ReactNode }) {
  const [active, set] = useState(defaultValue);
  return <TabsCtx value={{ active, set }}>{children}</TabsCtx>;
}
function Tab({ value, children }: { value: string; children: React.ReactNode }) {
  const { active, set } = useContext(TabsCtx)!;
  return <button data-active={active === value} onClick={() => set(value)}>{children}</button>;
}
function Panel({ value, children }: { value: string; children: React.ReactNode }) {
  const { active } = useContext(TabsCtx)!;
  return active === value ? <div>{children}</div> : null;
}
Tabs.Tab = Tab;
Tabs.Panel = Panel;
export { Tabs };

// Usage:
// <Tabs defaultValue="a"><Tabs.Tab value="a">A</Tabs.Tab><Tabs.Panel value="a">…</Tabs.Panel></Tabs>
```

### Render prop
```tsx
function Toggle({ children }: { children: (state: { on: boolean; toggle: () => void }) => React.ReactNode }) {
  const [on, setOn] = useState(false);
  return <>{children({ on, toggle: () => setOn((v) => !v) })}</>;
}
// <Toggle>{({ on, toggle }) => <button onClick={toggle}>{on ? 'on' : 'off'}</button>}</Toggle>
```

### Polymorphic `as` prop
```tsx
type AsProp<T extends React.ElementType> = { as?: T } & React.ComponentPropsWithoutRef<T>;

function Box<T extends React.ElementType = 'div'>({ as, ...rest }: AsProp<T>) {
  const Tag = as ?? 'div';
  return <Tag {...rest} />;
}
// <Box as="section" className="x">…</Box>
```

### Radix Slot pattern (asChild)
```tsx
import { Slot } from '@radix-ui/react-slot';

function Button({ asChild, ...props }: { asChild?: boolean } & React.ComponentProps<'button'>) {
  const Comp = asChild ? Slot : 'button';
  return <Comp className="btn" {...props} />;
}
// <Button asChild><a href="/x">link styled as button</a></Button>
```

### Layout primitives (Stack)
```tsx
function Stack({ gap = 8, children }: { gap?: number; children: React.ReactNode }) {
  return <div style={{ display: 'flex', flexDirection: 'column', gap }}>{children}</div>;
}
```

## 매 결정 기준
| 상황 | Pattern |
|---|---|
| Single content area | `children` |
| Multiple structured slots | Named props or compound |
| Tightly-coupled siblings | Compound + context |
| Behavior + UI separation | Render props / hook |
| Style polymorphism | `as` prop or `Slot` |

**기본값**: 매 children prop 으로 시작 → 복잡해지면 compound + context.

## 🔗 Graph
- 부모: [[React]] · [[Component-Design]]
- 변형: [[Vue-Slots]] · [[Svelte-Snippets]] · [[Web-Components]]
- 응용: [[Radix-UI]] · [[Headless-UI]] · [[shadcn]]
- Adjacent: [[Hooks]] · [[Server-Components]] · [[Composition API]]

## 🤖 LLM 활용
**언제**: design system 구축, library API 설계, complex form/dialog UI.
**언제 X**: 매 trivial leaf component — over-engineering.

## ❌ 안티패턴
- **Prop explosion**: 매 20+ props → 매 compound 로 분해.
- **`cloneElement` everywhere**: 매 fragile, prefer context.
- **Deep prop drilling**: 매 context or compound 로 해결.

## 🧪 검증 / 중복
- Verified (react.dev / Radix UI patterns / Kent Dodds blog).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — React composition idioms + compound pattern |