bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

Browse Source
This commit is contained in:
Antigravity Agent
2026-05-02 09:18:34 +09:00
parent c84dcb8371
commit 6445fcc05b
13150 changed files with 55394 additions and 100862 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics_Art/UI_UX_Assets/React Component Architecture.md
+3 -3
View File
@@ -1,4 +1,4 @@
# [[React Component Architecture]]
# [[React Component Architecture|React Component Architecture]]
## 📌 Brief Summary
React Component Architecture(리액트 컴포넌트 아키텍처)는 확장 가능하고 유지보수가 용이하며 재사용 가능한 사용자 인터페이스(UI)를 구축하기 위한 구조적 방법론 및 설계 패턴을 의미합니다. 이 아키텍처는 아토믹 디자인(Atomic Design)과 같은 세분화 기준을 통해 컴포넌트를 계층적으로 구성하고, 컴파운드 컴포넌트(Compound Components)나 헤드리스 컴포넌트(Headless Components)와 같은 고급 합성 패턴을 사용하여 비즈니스 로직과 스타일링의 결합도를 낮춥니다. 잘 설계된 컴포넌트 아키텍처는 디자인 토큰(Design Tokens)의 적용을 용이하게 하며, 거대한 단일 컴포넌트에 발생하는 'Prop 드릴링' 문제를 최소화하여 대규모 프론트엔드 환경에서의 일관성과 유연성을 보장합니다.
@@ -24,8 +24,8 @@ React Component Architecture(리액트 컴포넌트 아키텍처)는 확장 가
앱이 확장됨에 따라 단일 컴포넌트를 넘어 앱 간의 의존성을 관리하는 것이 중요해집니다 [24]. 모노레포(Turborepo, Nx 등) 내에서 Feature-Sliced Design 방법론을 적용하여 코드를 Shared(UI 원자, 토큰), Entities, Features, Widgets, Pages, App 레이어로 나누어 계층 간 엄격한 의존성 방향을 설정할 수 있습니다 [25]. 이는 '무분별한 공유 폴더' 문제를 방지하고, 기능 단위의 독립성과 확장 가능한 UI 아키텍처를 제공합니다 [9].
## 🔗 Knowledge Connections
- **Related Topics:** [[Atomic Design]], [[Compound Components]], [[Headless Components]], [[Design Tokens]], [[Feature-Sliced Design (FSD)]]
- **Projects/Contexts:** [[Uber Base Web]], [[Shopify Polaris]], [[Tailwind CSS]], [[Styled Components]]
- **Related Topics:** [[Atomic Design|Atomic Design]], [[Compound Components|Compound Components]], [[Headless Components|Headless Components]], [[Design Tokens|Design Tokens]], [[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD)]]
- **Projects/Contexts:** [[Uber Base Web|Uber Base Web]], [[Shopify Polaris|Shopify Polaris]], [[Tailwind CSS|Tailwind CSS]], [[Styled Components|Styled Components]]
- **Contradictions/Notes:** 컴파운드 컴포넌트 패턴은 뛰어난 유연성을 제공하지만, 지나친 자유도(Too much freedom)로 인해 개발자가 서브 컴포넌트를 임의로 생략하거나 순서를 바꿔 UX와 접근성을 훼손할 위험이 존재합니다 [26]. 따라서 버튼, 아이콘, 배지 등 고정된 레이아웃을 가진 단순한 컴포넌트에는 적용을 피하고(단순한 Prop 방식이 더 안전함), 레이아웃 변형이 잦은 복잡한 UI(탭, 모달, 아코디언 등)에만 선택적으로 사용해야 합니다 [27, 28].
---