CSS-in-JS란?
CSS 파일이 아닌 JS/TS 컴포넌트 파일 안에 스타일을 작성하는 접근이다. 컴포넌트와 스타일을 한곳에 묶어 캡슐화한다.
장점
- 컴포넌트 단위 스타일 격리 (클래스명 충돌 없음)
- props 기반 동적 스타일
- TypeScript 지원
단점·최근 경향
- 런타임 비용 (styled-components 같은 경우)
- RSC와 호환성 이슈
- 2023년 이후 Tailwind + CSS Modules로 회귀 경향
- Zero-runtime CSS-in-JS(Linaria, Vanilla Extract, Panda CSS)가 대안으로 부상