제로 런타임 CSS(+ CSS-in-JS)

 

CSS-in-JS

 

CSS-in-JS란 자바스크립트 파일 내에서 CSS를 직접 작성하여 컴포넌트 단위로 스타일을 관리하는 기술입니다.

기존 CSS 파일 분리 방식과 달리, 런타임에 스타일을 동적으로 생성 및 적용하여 컴포넌트 중심 개발에 최적화되어 있으며, 스타일 스코프 오염을 방지하고 상태에 따른 동적 스타일링이 용이합니다.

하지만, CSS-in-JS의 경우, 런타임에서 CSS를 만들다 보니 성능 문제가 생길 가능성이 있습니다. 예를 들어, 사용자가 페이지를 로딩할 때마다 CSS를 동적으로 계산해서 DOM에 삽입하면, 브라우저가 이를 처리하는 데 시간이 걸리게 됩니다. 특히, 앱이 커질수록 성능이 떨어질 수 있고, CSS를 캐싱하기도 어려운 문제가 존재합니다.

 

제로 런타임 CSS

 

제로 런타임 CSS는 CSS-in-JS의 단점을 보완하기 위해 등장한 방식입니다. 제로 런타임 CSS는 빌드 시점에 CSS를 미리 다 만들어 놓는 방식입니다.

앱이 실행되기 전에, 빌드 시점에 모든 스타일을 정적인 CSS 파일로 변환하기에 런타임에 추가로 CSS를 생성하지 않습니다. 그렇기 때문에 CSS-inJS 보다 로딩 속도가 더 빠르고, 사용되지 않는 CSS는 빌드 과정에서 제거되기 때문에 최종 파일 크기가 작아집니다.

 

제로 런타임 CSS의 단점

런타임에서 동적으로 생성해야 하는 스타일을 구현하기가 까다롭습니다. 예를 들어, 사용자 입력값에 따라 스타일이 달라지는 경우엔 추가 로직을 작성해주어야 합니다. 또한 스타일을 빌드 시점에 모두 처리해야 하다 보니, 빌드 시간이 기존보다 길어질 수 있습니다.