# [[CSS-in-JS]]

## 📌 Brief Summary
CSS-in-JS는 JavaScript 파일 내에서 CSS를 직접 작성하여 컴포넌트 단위로 스타일을 결합하는 모던 웹 스타일링 접근 방식입니다 [1, 2]. 기존의 전통적인 CSS가 가진 글로벌 스코프(Global Scope) 문제를 해결하고, 컴포넌트의 상태(State)나 프롭스(Props)에 기반한 동적 스타일링을 가능하게 합니다 [1, 3, 4]. 대표적인 라이브러리로는 styled-components와 Emotion이 있지만, 최근 런타임 성능 오버헤드와 프레임워크 호환성 문제로 인해 빌드 타임에 CSS를 추출하는 Zero-Runtime 방식으로 진화하고 있습니다 [5-8].

## 📖 Core Content
- **주요 장점:**
  - **스코프 고립 및 충돌 방지:** 자동으로 고유한 클래스명을 생성하여 스타일의 충돌을 막아주며, BEM과 같은 복잡한 네이밍 컨벤션 없이도 캡슐화를 달성할 수 있습니다 [9, 10].
  - **동적 스타일링 및 테마 적용:** 컴포넌트의 프롭스(Props)와 애플리케이션 상태(State)에 직접 접근하여 스타일을 생성할 수 있어, 복잡한 테마(Theming) 시스템을 매끄럽게 구현할 수 있습니다 [3, 4, 8].
  - **응집도(Co-location):** 컴포넌트의 로직과 스타일이 한 파일에 위치하므로, 유지보수성이 높고 컴포넌트를 이동하거나 삭제할 때 스타일 코드가 버려지는(orphaned CSS) 문제를 방지합니다 [3, 4, 11].
  - **개발자 경험(DX):** TypeScript 통합을 통한 타입 안정성, 자동 완성, 자동 벤더 프리픽싱(Vendor prefixing) 등을 지원하여 버그를 줄이고 개발 시간을 단축시킵니다 [12, 13].

- **주요 단점 및 한계:**
  - **런타임 성능 오버헤드:** 브라우저 런타임에서 CSS 문자열을 파싱하고 DOM에 주입해야 하며, 프롭스 변경 시 스타일을 재계산해야 하므로 렌더링 시간이 지연됩니다 [4, 12, 14, 15].
  - **번들 크기 증가:** styled-components(약 12.7kb~30kb)나 Emotion(약 7.9kb~12kb) 등의 라이브러리 자체가 JavaScript 번들에 추가되어 초기 로딩 및 실행에 부담을 줍니다 [7, 14].
  - **React Server Components (RSC) 호환성 문제:** React의 컨텍스트(Context)에 의존하는 런타임 CSS-in-JS 라이브러리들은 서버 환경에서 구동되는 React Server Components 환경과 근본적으로 호환되지 않아, 2024~2025년 이후 현대적인 프레임워크(예: Next.js App Router) 환경에서 큰 문제로 대두되었습니다 [7, 8, 16].

- **미래 동향 및 해결책 (Zero-Runtime CSS-in-JS):**
  - 런타임 오버헤드 및 RSC 호환성 문제를 극복하기 위해, 개발 시에는 CSS-in-JS의 문법을 사용하되 빌드 타임(Build time)에 정적인 CSS 파일로 추출하는 **Zero-Runtime** 접근법이 등장했습니다 [5, 6, 15, 16].
  - Linaria, vanilla-extract, Panda CSS 등이 대표적이며, 이들은 런타임 페널티 없이 타입 안정성과 컴포넌트 기반 스타일링의 이점을 제공하여 대규모 엔터프라이즈 시스템에서도 권장되는 방식으로 자리 잡고 있습니다 [15, 17, 18].

## 🔗 Knowledge Connections
- **Related Topics:** [[CSS Modules]], [[Tailwind CSS]], [[Zero-Runtime CSS-in-JS]], [[React Server Components]], [[Design Tokens]]
- **Projects/Contexts:** [[컴포넌트 기반 아키텍처]], [[Next.js App Router 프로젝트]], [[대규모 엔터프라이즈 테마 시스템]]
- **Contradictions/Notes:** 소스 문헌들은 CSS-in-JS가 강력한 동적 스타일링과 우수한 개발자 경험을 제공한다고 동의하지만 [3, 4, 8], 성능 오버헤드와 최신 React Server Components의 등장이라는 기술적 배경 변화로 인해 새로운 프로젝트에서는 런타임 기반의 CSS-in-JS(styled-components, Emotion 등)의 사용을 피하고, 대신 [[Tailwind CSS]], [[CSS Modules]], 혹은 [[vanilla-extract]] 같은 Zero-runtime 솔루션으로 마이그레이션할 것을 강력히 권장하고 있습니다 [8, 16, 19].

---
*Last updated: 2026-04-26*