2nd/10_Wiki/Topics/Frontend_Mastery/CSS-in-JS.md

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.7kb30kb)나 Emotion(약 7.9kb12kb) 등의 라이브러리 자체가 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