docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
# [[React Component Patterns]]
|
||||
# [[React Component Patterns|React Component Patterns]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
React Component Patterns(리액트 컴포넌트 패턴)은 확장 가능하고 유지보수가 용이한 프론트엔드 애플리케이션을 구축하기 위해 컴포넌트를 구성하고 설계하는 구조적 방법론입니다 [1, 2]. 단순한 속성(Prop) 기반의 경직된 설정에서 벗어나 조합(Composition) 중심의 API로 전환함으로써 Prop Drilling을 줄이고, 높은 재사용성과 유연한 UI를 구현하는 데 목적이 있습니다 [1, 3, 4]. 대표적인 패턴으로는 아토믹 디자인, 컴파운드 컴포넌트, 헤드리스 컴포넌트 등이 있습니다 [2, 5, 6].
|
||||
@@ -26,8 +26,8 @@ React Component Patterns(리액트 컴포넌트 패턴)은 확장 가능하고
|
||||
헤더, 푸터, 액션 등 의도된 영역을 미리 비워두어 사용자가 자신의 콘텐츠를 끼워 넣을 수 있게 함으로써 Prop 과부하를 피하는 방식입니다 [19]. 또한, 상태 및 데이터를 다루는 로직(Container)과 UI 렌더링(Presentational)을 분리하는 패턴도 Storybook과 같은 환경에서 컴포넌트를 독립적으로 테스트하기 좋게 만듭니다 [25].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Compound Components]], [[Headless Components]], [[Atomic Design]], [[Overrides Pattern]], [[Render Props]], [[Feature-Sliced Design (FSD)]]
|
||||
- **Projects/Contexts:** [[Uber Base Web]], [[Radix UI]]
|
||||
- **Related Topics:** [[Compound Components|Compound Components]], [[Headless Components|Headless Components]], [[Atomic Design|Atomic Design]], [[Overrides Pattern|Overrides Pattern]], [[Render Props|Render Props]], [[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD)]]
|
||||
- **Projects/Contexts:** [[Uber Base Web|Uber Base Web]], [[Radix UI|Radix UI]]
|
||||
- **Contradictions/Notes:** 컴파운드 컴포넌트 패턴은 뛰어난 유연성을 제공하지만 사용자가 하위 컴포넌트를 임의로 누락하거나 순서를 변경할 수 있어 UX나 접근성 일관성이 깨질 위험(Too much freedom)이 있습니다. 따라서 명확한 조합 경계와 문서화가 필수적입니다 [26, 27]. 아울러 아토믹 디자인은 시각적 구조화에는 유리하지만 복잡한 비즈니스 로직이나 상태가 엮인 컴포넌트를 분류할 때 한계가 있어, 종종 기능 분할 설계(Feature-Sliced Design, FSD)와 함께 결합되어 사용됩니다 [28].
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user