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 Design Systems.md
+3 -3
View File
@@ -1,4 +1,4 @@
# [[React Design Systems]]
# [[React Design Systems|React Design Systems]]
## 📌 Brief Summary
React Design Systems(리액트 디자인 시스템)은 재사용 가능한 UI 컴포넌트, 디자인 토큰(Design Tokens), 그리고 체계적인 스타일링 방법론을 결합하여 일관되고 확장 가능한 사용자 인터페이스를 구축하기 위한 프레임워크입니다 [1, 2]. 이 시스템은 아토믹 디자인(Atomic Design)이나 컴파운드 컴포넌트(Compound Components) 같은 아키텍처 패턴을 통해 UI 로직과 비즈니스 로직을 분리합니다 [3-5]. 특히 현대의 React 환경에서는 성능 및 React Server Components(RSC)와의 호환성을 위해 런타임 오버헤드가 있는 CSS-in-JS 방식(Styled Components)과 빌드 타임 최적화를 제공하는 유틸리티 퍼스트 방식(Tailwind CSS) 사이에서 기술적 균형을 맞추는 것이 핵심 과제입니다 [6-8].
@@ -20,8 +20,8 @@ React Design Systems(리액트 디자인 시스템)은 재사용 가능한 UI
* FSD(Feature-Sliced Design) 방법론을 모노레포와 결합하여, `shared`(재사용 UI 및 토큰), `entities`(도메인 구조), `features`(비즈니스 로직) 등의 계층으로 나누고 각 패키지 간의 명시적인 공개 API(Public API)만을 통한 통신을 강제함으로써 의존성 엉킴과 스파게티 코드를 방지합니다 [53-56].
## 🔗 Knowledge Connections
- **Related Topics:** [[CSS-in-JS]], [[Tailwind CSS]], [[Design Tokens]], [[Atomic Design]], [[Compound Components]], [[Headless UI]], [[React Server Components]], [[Feature-Sliced Design]]
- **Projects/Contexts:** [[Shopify Polaris]], [[Uber Base Web]]
- **Related Topics:** [[CSS-in-JS|CSS-in-JS]], [[Tailwind CSS|Tailwind CSS]], [[Design Tokens|Design Tokens]], [[Atomic Design|Atomic Design]], [[Compound Components|Compound Components]], [[Headless UI|Headless UI]], [[React Server Components|React Server Components]], [[Feature-Sliced Design|Feature-Sliced Design]]
- **Projects/Contexts:** [[Shopify Polaris|Shopify Polaris]], [[Uber Base Web|Uber Base Web]]
- **Contradictions/Notes:** 소스에 따르면 Styled Components 등 CSS-in-JS는 동적 스타일링과 런타임 테마 적용에 매우 강력하지만, CSS 생성에 따른 런타임 성능 오버헤드와 Next.js의 React Server Components(RSC) 환경에서의 제약(직접적인 Context 사용 불가)이라는 단점이 존재합니다 [7-9, 14]. 반면 Tailwind CSS와 같은 유틸리티 퍼스트 접근법은 빌드 타임에 정적 CSS를 생성해 런타임 부하가 없으며 RSC와 완벽히 호환되므로 성능이 중요한 대규모 및 프로덕션 환경에서 더욱 유리하다고 대조하여 설명합니다 [18, 19, 21, 57].
---