Antigravity Agent
25 lines
3.9 KiB
Markdown
25 lines
3.9 KiB
Markdown
# [[Next.js App Router 환경의 컴포넌트 스타일링|Next.js App Router 환경의 컴포넌트 스타일링]]
|
|
|
|
## 📌 Brief Summary
|
|
[[Next.js App Router|Next.js App Router]] 환경에서는 React Server Components(RSC)와의 호환성 문제로 인해 기존의 런타임 CSS-in-JS(예: [[styled-components|styled-components]], Emotion) 사용이 부적합합니다 [1, 2]. 대신 확장성과 유지보수성을 위해 런타임 오버헤드가 없는 Tailwind CSS, [[CSS Modules|CSS Modules]], 또는 vanilla-extract와 같은 [[Zero-Runtime CSS-in-JS|Zero-Runtime CSS-in-JS]]의 사용이 권장됩니다 [2, 3]. 더불어 성공적인 컴포넌트 스타일링과 관리를 위해서는 라우팅 구조와 비즈니스 로직 및 UI 컴포넌트를 분리하는 기능 기반(Feature-Driven) 아키텍처의 도입이 필수적입니다 [4].
|
|
|
|
## 📖 Core Content
|
|
* **React [[Server Components|Server Components]](RSC)와의 호환성 한계**
|
|
[[Next.js|Next.js]] App Router 환경은 브라우저가 아닌 서버에서 실행되어 HTML을 스트리밍하는 React Server Components(RSC)를 활용합니다 [2]. styled-components나 Emotion과 같은 기존의 컨텍스트 기반 런타임 CSS-in-JS 라이브러리들은 서버 컴포넌트에 React 컨텍스트가 존재하지 않기 때문에 근본적으로 호환되지 않으며, 이 환경에서는 런타임 CSS-in-JS의 사용이 문제(problematic)가 됩니다 [1, 2].
|
|
|
|
* **App Router 환경에 권장되는 스타일링 전략**
|
|
새로운 Next.js App Router 프로젝트를 구축하거나 기존 프로젝트를 App Router로 마이그레이션할 때는 런타임 CSS-in-JS를 피해야 합니다 [3]. 대신 다음의 세 가지 접근 방식 중 하나를 채택하는 것이 권장됩니다 [2, 3].
|
|
* **Tailwind CSS**: 런타임 오버헤드가 전혀 없으며, 중소규모 앱에서 컴포넌트 원시 요소(예: shadcn/ui)와 결합하여 사용하기에 적합합니다 [3, 5].
|
|
* **CSS Modules**: 복잡한 애니메이션을 구현하거나 CSS 기술 역량이 강한 팀에게 적합하며 런타임 비용이 발생하지 않습니다 [3, 5].
|
|
* **Zero-runtime CSS-in-JS (vanilla-extract)**: 빌드 타임에 정적 CSS를 생성하여 RSC와 호환되며, 여러 테마를 가진 대규모 디자인 시스템에서 타입 안전성을 확보하며 스타일링하기에 가장 적합합니다 [3, 5].
|
|
|
|
* **확장 가능한 컴포넌트 폴더 구조 설계**
|
|
App Router 환경에서 컴포넌트와 스타일을 유지보수 가능하게 관리하려면, `app/` 디렉토리에 라우트, 컴포넌트, 훅(hooks), 로직을 모두 섞어 넣는 실수를 피해야 합니다 [4]. `app/` 폴더는 라우팅과 레이아웃 관리에만 엄격히 사용하고, 실제 스타일이 적용된 UI 컴포넌트와 비즈니스 로직은 `src/features/`와 같은 디렉토리에 도메인별(Feature-Driven)로 분리하여 캡슐화하는 것이 장기적인 확장성에 유리합니다 [4, 6, 7].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** [[CSS Modules|CSS Modules]], Tailwind CSS, CSS-in-JS, [[React Server Components|React Server Components]]
|
|
- **Projects/Contexts:** 신규 Next.js App Router 프로젝트 환경 설정, 기존 React 프로젝트의 App Router 마이그레이션 전략, 기능 기반 아키텍처([[Feature-Driven Architecture|Feature-Driven Architecture]])
|
|
- **Contradictions/Notes:** 컴포넌트 상태와 프롭스(props)에 기반한 동적 스타일링에 매우 유용하게 쓰이던 styled-components와 Emotion 같은 런타임 CSS-in-JS 기술들이 과거에는 훌륭한 개발자 경험을 제공했지만, Next.js App Router라는 최신 패러다임 하에서는 RSC와의 비호환성 및 런타임 성능 비용으로 인해 권장되지 않는 기술로 전환되었다는 점이 가장 큰 대조를 이룹니다 [1, 3, 8].
|
|
|
|
---
|
|
*Last updated: 2026-04-26* |