Antigravity Agent
25 lines
4.2 KiB
Markdown
25 lines
4.2 KiB
Markdown
# [[CSS-in-JS]]
|
|
|
|
## 📌[[ brief]] Summary
|
|
CSS-in-JS는 [[JavaScript]] 파일 내에 직접 CSS를 작성하여 스타일과 컴포넌트를 같은 위치(co-location)에 배치하는 프론트엔드 스타일링 접근 방식입니다. 대표적인 라이브러리로 [[styled-components]]와 Emotion 등이 있으며, 템플릿 리터럴을 활용해 컴포넌트의 상태나 props에 기반한 동적 스타일링을 자연스럽게 지원합니다. 하지만 런타임에 CSS를 생성하고 주입하는 과정에서 발생하는 성능 오버헤드와 [[React Server Components]](RSC)와의 호환성 문제로 인해 최근에는 Zero-runtime 방식이나 유틸리티 퍼스트 프레임워크([[Tailwind CSS]] 등)와 비교되며 아키텍처적 재평가가 이루어지고 있습니다.
|
|
|
|
## 📖 Core Content
|
|
* **주요 장점 및 특징:**
|
|
CSS-in-JS는 자바스크립트의 변수, 상태, props 등을 직접 활용해 동적인 스타일링을 손쉽게 구현할 수 있게 해줍니다 [1]. 컴포넌트와 스타일이 같은 파일에 공존하므로 컴포넌트 삭제 시 스타일도 함께 제거되어 유지보수가 용이하며, 과거 CSS의 전역 네임스페이스 충돌 문제나 스타일이 엇나가는 문제를 효과적으로 해결합니다 [1, 2]. 또한 내부적인 테마 프로바이더(Theme Provider)를 통해 라이트/다크 모드 등 다중 테마 관리가 수월하며, TypeScript를 통한 타입 안전성도 제공합니다 [1, 2].
|
|
|
|
* **런타임 성능 및 번들 사이즈 한계:**
|
|
가장 큰 단점은 브라우저 런타임 시 자바스크립트를 실행하여 CSS 문자열을 생성하고 `<style>` 태그로 주입해야 한다는 점입니다 [1, 3]. 이는 추가적인 자바스크립트 번들 사이즈(예: styled-components 약 30kb, Emotion 약 12kb 추가)를 유발하고, CPU 사이클을 소모하여 First Input Delay(FID)나 Interaction to Next Paint(INP) 등 [[Core Web Vitals]] 지표에 부정적인 영향을 미칩니다 [1, 3-5]. 정량적 벤치마크에 따르면 10,000개의 리스트 아이템을 렌더링할 때 Tailwind CSS는 85ms가 걸린 반면, [[Styled Components]]는 148ms가 소요되어 약 63%의 성능 격차를 보였습니다 [6].
|
|
|
|
* **[[React [[Server Components]] (RSC)]] 호환성 문제:**
|
|
[[Next.js App Router]]와 RSC 환경에서 런타임 중심의 CSS-in-JS는 큰 기술적 마찰을 겪고 있습니다. styled-components나 Emotion 같이 [[React Context]] 기반의 테마를 사용하는 라이브러리는 컨텍스트가 존재하지 않는 서버 컴포넌트 환경과 근본적으로 호환되지 않습니다 [4, 7, 8]. 이를 해결하기 위해 [[Next.js 15]] 등에서는 서버 렌더링 중 CSS 규칙을 수집하여 주입하는 '[[Style Registry]]' 패턴을 도입하고, 컴파일러 설정을 통해 클라이언트와 서버 간의 하이드레이션([[Hydration]]) 불일치를 방지하는 우회적인 방식을 사용해야만 합니다 [9, 10].
|
|
|
|
* **대안적 접근 ([[Zero-Runtime CSS-in-JS]]):**
|
|
런타임 오버헤드와 RSC 호환성 문제를 해결하기 위해 `[[vanilla-extract]]`와 같은 Zero-runtime CSS-in-JS 라이브러리가 강력한 대안으로 부상하고 있습니다 [7, 11]. 이 방식은 런타임 자바스크립트 오버헤드 없이 빌드 타임에 정적 CSS를 생성하며, TypeScript를 기반으로 타입 안전한 스타일링을 제공하여 대규모 디자인 시스템 관리에 유리합니다 [11, 12].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** [[styled-components]], [[Tailwind CSS]], [[React Server Components]], [[Zero-runtime CSS-in-JS]]
|
|
- **Projects/Contexts:** [[Next.js App Router Migration]], [[Design[[ system]] Architecture]], [[Performance Optimization]]
|
|
- **Contradictions/Notes:** CSS-in-JS는 컴포넌트와 스타일의 통합으로 개발자 경험(DX)을 극대화한다는 강점이 있으나, 여러 엔터프라이즈급 성능 감사 결과에서는 Styled Components 대신 런타임 오버헤드가 없는 Tailwind CSS나 정적 CSS 방식으로 전환했을 때 모바일 환경의 INP(Interaction to Next Paint) 지표가 58.4% 향상되는 등 런타임 비용의 한계가 강하게 지적되고 있습니다 [1, 5, 13].
|
|
|
|
---
|
|
*Last updated: 2026-04-26* |