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/Client Components.md
+4 -4
View File
@@ -1,4 +1,4 @@
# [[Client Components]]
# [[Client Components|Client Components]]
## 📌 Brief Summary
클라이언트 컴포넌트(Client Components)는 모던 React 아키텍처(예: Next.js 15 App Router)에서 `'use client'` 지시어로 정의되며 전통적인 React 컴포넌트처럼 동작하는 UI 요소이다 [1]. 서버 컴포넌트와 달리 클라이언트 측 자바스크립트를 실행하므로 상태(state) 관리, 이벤트 핸들러 등 상호작용이 필요하거나 브라우저 API를 사용해야 할 때 필수적으로 적용된다 [1, 2]. 확장 가능한 프론트엔드 환경에서는 자바스크립트 번들 크기를 최소화하고 성능을 극대화하기 위해 클라이언트 컴포넌트를 작고 기능적으로 집중된 형태로 유지하는 것이 핵심 원칙이다 [2, 3].
@@ -14,9 +14,9 @@
* **스타일링 파라다임 및 테마 적용(CSS-in-JS):** Next.js App Router 아키텍처에서 styled-components와 같은 런타임 CSS-in-JS 라이브러리를 사용하려면, 렌더링 중 CSS 규칙을 수집하기 위한 '스타일 레지스트리(Style Registry)'를 구성하고 이를 클라이언트 컴포넌트로 래핑해야 한다 [6]. 더 나아가, React Context 없이도 클라이언트 컴포넌트와 서버 컴포넌트 모두에서 테마가 작동하도록 CSS 사용자 지정 속성(CSS custom properties)을 기반으로 한 `createTheme` 등의 기능이 도입되어 렌더링 컨텍스트의 한계를 극복하고 있다 [7].
## 🔗 Knowledge Connections
- **Related Topics:** [[Server Components]], [[Hydration]], [[CSS-in-JS]], [[React Context]]
- **Projects/Contexts:** [[Next.js App Router]], [[styled-components]]
- **Contradictions/Notes:** 전통적인 런타임 CSS-in-JS 라이브러리(styled-components, Emotion)는 내부적으로 React Context에 의존하기 때문에 서버 컴포넌트에서는 작동하지 않고 클라이언트 컴포넌트 래핑이 필요하지만, 대규모 프로젝트의 성능(Core Web Vitals) 향상과 Next.js App Router와의 완벽한 호환을 위해서는 런타임 비용이 없는 [[Tailwind CSS]], CSS Modules 또는 vanilla-extract 등의 정적 CSS 생성 도구로의 전환이 2025년 기준 더욱 강력히 권장되고 있다 [6, 8-11].
- **Related Topics:** [[Server Components|Server Components]], [[Hydration|Hydration]], [[CSS-in-JS|CSS-in-JS]], [[React Context|React Context]]
- **Projects/Contexts:** [[Next.js App Router|Next.js App Router]], [[styled-components|styled-components]]
- **Contradictions/Notes:** 전통적인 런타임 CSS-in-JS 라이브러리(styled-components, Emotion)는 내부적으로 React Context에 의존하기 때문에 서버 컴포넌트에서는 작동하지 않고 클라이언트 컴포넌트 래핑이 필요하지만, 대규모 프로젝트의 성능(Core Web Vitals) 향상과 Next.js App Router와의 완벽한 호환을 위해서는 런타임 비용이 없는 [[Tailwind CSS|Tailwind CSS]], CSS Modules 또는 vanilla-extract 등의 정적 CSS 생성 도구로의 전환이 2025년 기준 더욱 강력히 권장되고 있다 [6, 8-11].
---
*Last updated: 2026-04-26*