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 | ||
| 표준 라이브러리 및 API | 표준 내장 객체 · Fetch API · Web Cryptography API | ||
| 구현체 | <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 마비 사태 | }}}}}}}}} | |