1. 개요
선언적 속성인 CSS를 JavaScript 영역으로 가져와 동적으로 사용하거나, 또는 JS 코드 내에 일체된 것처럼 보이게 하는 방법론을 제공하는 레이어를 말한다.2. 특징
실질적으로는 기존 웹의 또다른 레이어인 컴포넌트가 존재하는 맥락에서 다루어지는 기술이다. 따라서 컴포넌트 기반 프레임워크와 기술을 제외하고 CSS-in-JS를 정의하는 것은 별 의미가 없다. 이런 개념을 고려하지 않는 순수 HTML과 CSS는 둘이 서로 완전히 독립적인 레이어이기 때문.그러나 2013년대 이후 의미적으로 독립된 element와 상태를 한 군데 묶는 컴포넌트의 개념이 등장해 사실상 표준으로 떠오르자 자연스럽게 해당 원칙을 CSS에도 적용하기 시작했고, 이런 '스타일의 컴포넌트화' 시도들의 결과가 CSS-in-JS
CSS-in-JS 기술이 등장한 초창기에는 런타임 성능 문제가 있다거나 번들 사이즈를 키운다는 지적이 많았다. 가령 브라우저가 최적화할 수 있는 선언적 CSS와 달리 JS 영역에서 일일히 call해줘야 한다거나, 중복되는 스타일 등이 CSS 하나로 전달이 안 되니 JS 쪽 번들이 자꾸 커지거나 CSS 브라우저 캐싱에 대한 트래픽 이득을 얻을 수 없다는 것. 그러나 현재는 개발 경험만 js 코드인 것처럼 느껴지게 하고 실제로는 번들러 단까지 내려가서 static한 부분을 사전에 완성된 CSS 파일로 컴파일하는 zero-runtime 구현체가 많아 이런 문제는 대부분 해결되었다.
3. 둘러보기
| [[JavaScript| 관련 문서 | |||
| {{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px)" {{{#!folding [ 펼치기 · 접기 ] {{{#!wiki style="margin: -5px -1px -11px" | <colbgcolor=#f7df1e,#f7df1e><colcolor=#000,#000> 관련 문서 | 표준(TC39 · 브라우저 전쟁) · Vanilla JS · AJAX · JSFuck · 상태관리 라이브러리 · JSON · CSS-in-JS | |
| 문법 | 표준 내장 객체 · this · undefined | ||
| 구현체 | <bgcolor=#f7df1e,#f7df1e> 엔진 | V8 · SpiderMonkey · JavaScriptCore · 헤르메스 · Boa | |
| <bgcolor=#f7df1e,#f7df1e> 런타임 | Node.js · Deno · Bun · workerd | ||
| 패키지 관리자 | npm · Bun | ||
| 파생 언어 | TypeScript · CoffeeScript · ActionScript · AssemblyScript · elm · PureScript · ReasonML · ReScript | ||
| 관련 인물 | 브랜든 아이크 | ||
| 기타 | JavaScript npm 마비 사태 | }}}}}}}}} | |