docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

10_Wiki/Topics/Topic_Programming/Frontend/Component-Composition.md

@@ -0,0 +1,173 @@
+---
+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]]
+- 변형: [[Web-Components]]
+- 응용: [[Radix-UI]] · [[Headless-UI]] · [[shadcn]]
+- Adjacent: [[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 |