- 빌드타임에 미리 css 를 전부 생성해놓는 방식
- 즉 런타임 이전에, 미리 필요한 CSS를 빌드 시점에 생성하여 제공.
- 이렇게 생성된 CSS 파일은
<link>태그를 기반으로 브라우저에 제공된다.
- 이는 기존의 module.css 를 사용할때에도 마찬가지!
- 동적인 스타일링은 사전에 정의한 스타일의 조합을 기반으로만 가능하다!
- runtime css-in-js은 직접 stylesheet를 수정하여, 동적인 스타일링을 가능케함
- but, zero-runtime css-in-js 는 css variable을 빌드 타임에 미리 생성해두고, 이를 상황에 맞게 적용하는 방식임!
- 새로운 variable은 런타임에서 동적으로 생성이 불가능함! 따라서 동적 스타일링에는 당연히 제한이 있음.
좋은 점
- CSS 파일과 JS 파일이 분리됨
- 따라서 리소스 병렬로 요청 가능
- 번들사이즈 감소
- 런타임 성능 개선
불편한 점
- 동적 스타일링 제한이 있음. 유연한 스타일링이 다소 어렵다.
- 필요한 스타일변수를 전부 사전에 등록시켜야함 ㅜㅜ