Antigravity Agent
25 lines
4.4 KiB
Markdown
25 lines
4.4 KiB
Markdown
# [[CSS-in-JS|CSS-in-JS]]
|
|
|
|
## 📌 Brief Summary
|
|
CSS-in-JS는 [[JavaScript|JavaScript]] 파일 내에 직접 CSS를 작성하여 스타일과 컴포넌트를 같은 위치(co-location)에 배치하는 프론트엔드 스타일링 접근 방식입니다. 대표적인 라이브러리로 styled-components와 Emotion 등이 있으며, 템플릿 리터럴을 활용해 컴포넌트의 상태나 props에 기반한 동적 스타일링을 자연스럽게 지원합니다. 하지만 런타임에 CSS를 생성하고 주입하는 과정에서 발생하는 성능 오버헤드와 React Server Components(RSC)와의 호환성 문제로 인해 최근에는 Zero-runtime 방식이나 유틸리티 퍼스트 프레임워크([[Tailwind CSS|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|Core Web Vitals]] 지표에 부정적인 영향을 미칩니다 [1, 3-5]. 정량적 벤치마크에 따르면 10,000개의 리스트 아이템을 렌더링할 때 Tailwind CSS는 85ms가 걸린 반면, [[Styled Components|Styled Components]]는 148ms가 소요되어 약 63%의 성능 격차를 보였습니다 [6].
|
|
|
|
* **[[React Server Components (RSC)|React Server Components (RSC]] 호환성 문제:**
|
|
[[Next.js App Router|Next.js App Router]]와 RSC 환경에서 런타임 중심의 CSS-in-JS는 큰 기술적 마찰을 겪고 있습니다. styled-components나 Emotion 같이 React Context 기반의 테마를 사용하는 라이브러리는 컨텍스트가 존재하지 않는 서버 컴포넌트 환경과 근본적으로 호환되지 않습니다 [4, 7, 8]. 이를 해결하기 위해 Next.js 15 등에서는 서버 렌더링 중 CSS 규칙을 수집하여 주입하는 '[[Style Registry|Style Registry]]' 패턴을 도입하고, 컴파일러 설정을 통해 클라이언트와 서버 간의 하이드레이션([[Hydration|Hydration]]) 불일치를 방지하는 우회적인 방식을 사용해야만 합니다 [9, 10].
|
|
|
|
* **대안적 접근 ([[Zero-Runtime CSS-in-JS|Zero-Runtime CSS-in-JS]]):**
|
|
런타임 오버헤드와 RSC 호환성 문제를 해결하기 위해 `[[vanilla-extract|vanilla-extract]]`와 같은 Zero-runtime CSS-in-JS 라이브러리가 강력한 대안으로 부상하고 있습니다 [7, 11]. 이 방식은 런타임 자바스크립트 오버헤드 없이 빌드 타임에 정적 CSS를 생성하며, TypeScript를 기반으로 타입 안전한 스타일링을 제공하여 대규모 디자인 시스템 관리에 유리합니다 [11, 12].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** [[styled-components|styled-components]], Tailwind CSS, React Server Components, [[Zero-Runtime CSS-in-JS|Zero-runtime CSS-in-JS]]
|
|
- **Projects/Contexts:** [[Next.js App Router Migration|Next.js App Router Migration]], DesignSystem Architecture, [[Performance Optimization|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* |