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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-component-composition	Component Composition (React)	10_Wiki/Topics	verified	self	React Composition Compound Components	none	A	0.9	applied	react composition component-design frontend		2026-05-10	pending	language framework TypeScript 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

function Card({ children }: { children: React.ReactNode }) {
  return <div className="card">{children}</div>;
}
// <Card><h2>Hi</h2><p>Body</p></Card>

Named slots via props

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

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

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

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)

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)

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