[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/Compound Components Pattern.md

@@ -1,10 +1,10 @@
 # [[Compound Components Pattern]]
 
-## 📌 Brief Summary
-Compound Components 패턴은 암시적으로 상태를 공유하고 특정 부모 내에서만 작동하는 일련의 관련 컴포넌트들을 노출하여 선언적이고 가독성 높은 API를 구성하는 React 컴포넌트 설계 방식이다 [1]. 모든 기능을 수십 개의 prop으로 단일 컴포넌트에 쑤셔넣는 대신, 여러 협력 컴포넌트에 책임을 분산시켜 복잡한 요구사항을 처리한다 [2]. 이는 HTML의 `<select>`와 `<option>` 요소처럼 개별적인 책임을 유지하면서도 응집력 있는 단위로 함께 작동하여, 재사용 가능하고 유연한 UI를 구축하는 데 핵심적인 역할을 한다 [1, 3].
+## 📌[[ brief]] Summary
+[[Compound Components]] 패턴은 암시적으로 상태를 공유하고 특정 부모 내에서만 작동하는 일련의 관련 컴포넌트들을 노출하여 선언적이고 가독성 높은 API를 구성하는 React 컴포넌트 설계 방식이다 [1]. 모든 기능을 수십 개의 prop으로 단일 컴포넌트에 쑤셔넣는 대신, 여러 협력 컴포넌트에 책임을 분산시켜 복잡한 요구사항을 처리한다 [2]. 이는 HTML의 `<select>`와 `<option>` 요소처럼 개별적인 책임을 유지하면서도 응집력 있는 단위로 함께 작동하여, 재사용 가능하고 유연한 UI를 구축하는 데 핵심적인 역할을 한다 [1, 3].
 
 ## 📖 Core Content
-* **작동 원리 및 상태 관리:** 이 패턴은 React Context를 내부 계약(Internal Contract)으로 사용하여 prop drilling 없이 컴포넌트 간에 상태를 공유한다 [1, 4, 5]. 최상위(Root) 컴포넌트인 Provider는 전역 상태를 소유 및 관리하며, 하위 컴포넌트(Header, Body 등)는 전체 상태를 알 필요 없이 자신에게 필요한 좁은 범위의 상태만 소비하도록 설계된다 [6-8].
+* **작동 원리 및 상태 관리:** 이 패턴은 [[React Context]]를 내부 계약(Internal Contract)으로 사용하여 [[Prop Drilling]] 없이 컴포넌트 간에 상태를 공유한다 [1, 4, 5]. 최상위(Root) 컴포넌트인 Provider는 전역 상태를 소유 및 관리하며, 하위 컴포넌트(Header, Body 등)는 전체 상태를 알 필요 없이 자신에게 필요한 좁은 범위의 상태만 소비하도록 설계된다 [6-8].
 * **주요 장점:** 
   * 컴포넌트의 레이아웃과 구성을 소비자가 자유롭게 결정할 수 있는 높은 유연성을 제공한다 [3, 9].
   * 복잡한 기능을 구현할 때 수많은 설정 prop으로 인해 발생하는 'Prop Soup(프롭 수프)' 문제와 내부 로직이 숨겨지는 '블랙 박스' 문제를 해결하여 명확한 API를 유지할 수 있다 [10-12].
@@ -16,8 +16,8 @@ Compound Components 패턴은 암시적으로 상태를 공유하고 특정 부
 
 ## 🔗 Knowledge Connections
 - **Related Topics:** [[React Context API]], [[Headless Components]], [[Render Props]], [[Atomic Design]]
-- **Projects/Contexts:** [[Radix UI]], [[Headless UI]], [[React Design Systems]]
-- **Contradictions/Notes:** Compound Components는 구성의 유연성을 제공하여 재사용성을 높이지만, 너무 많은 자유도를 제공하면 일관성을 해치고 접근성을 손상시킬 수 있으므로 디자인 시스템 차원에서 "안전한 구성 경계(safe composition boundaries)"를 명확히 정의하고 문서화해야 한다 [14, 15]. 또한 모든 컴포넌트에 이 패턴을 남용하는 것은 가장 흔한 실수이며, 레이아웃이 고정된 단순 컴포넌트는 일반적인 Prop 기반 접근이 더 안전하고 단순하다고 조언한다 [16].
+- **Projects/Contexts:** [[Radix UI]], [[Headless UI]], [[React Design[[ system]]s]]
+- **Contradictions/Notes:** Compound Components는 구성의 유연성을 제공하여 재사용성을 높이지만, 너무 많은 자유도를 제공하면 일관성을 해치고 접근성을 손상시킬 수 있으므로 디자인 시스템 차원에서 "안전한 구성 경계(safe composition [[Boundaries]])"를 명확히 정의하고 문서화해야 한다 [14, 15]. 또한 모든 컴포넌트에 이 패턴을 남용하는 것은 가장 흔한 실수이며, 레이아웃이 고정된 단순 컴포넌트는 일반적인 Prop 기반 접근이 더 안전하고 단순하다고 조언한다 [16].
 
 ---
 *Last updated: 2026-04-26*