제로 런타임 CSS
CSS 스타일을 런타임(브라우저)이 아닌 빌드 타임에 미리 생성하여, 실행 중 JavaScript로 스타일을 계산하지 않는 CSS-in-JS 방식입니다.
기존 CSS-in-JS vs 제로 런타임
| 기존 CSS-in-JS (styled-components 등) | 제로 런타임 | |
|---|---|---|
| 스타일 생성 시점 | 런타임 (브라우저) | 빌드 타임 |
| JS 번들 포함 | O 스타일 계산 코드 포함 | X 포함 안 함 |
| 성능 | 상대적으로 느림 | 빠름 |
| 동적 스타일 | 자유롭게 가능 | 제한적 |
동작 방식
[기존 CSS-in-JS]
JS 실행 → 스타일 계산 → <style> 태그 주입 → 화면 렌더링
[제로 런타임]
빌드 시 CSS 파일 생성 → 브라우저는 CSS 파일만 로드 → 화면 렌더링
대표 라이브러리
| 라이브러리 | 특징 |
|---|---|
| Vanilla Extract | TypeScript 기반, 완전한 제로 런타임 |
| Linaria | styled-components 문법과 유사 |
| Panda CSS | 유틸리티 클래스 방식 |
| Tailwind CSS | 퍼스트클래스 제로 런타임 (엄밀히는 다른 접근) |
장단점
장점
- 런타임 오버헤드 없음 → 성능 향상
- JS 번들 크기 감소
- SSR 환경에서 스타일 깜빡임(FOUC) 없음
단점
- JS 변수 기반의 완전한 동적 스타일링 제한
- 빌드 설정이 복잡해질 수 있음
동적 스타일 처리 방식
/* 빌드 타임에 경우의 수를 미리 생성해둠 */
.button-primary { background: blue; }
.button-danger { background: red; }
/* 런타임엔 클래스명만 교체 */
완전한 동적 값(ex. 사용자 입력값으로 색상 지정)은 CSS Variable로 우회합니다.