Zero Runtime CSS in JS (Feat. Linaria)

Zero Runtime CSS in JS - Linaria를 접하게 된 계기

CSS in JS라고 하면 가장 먼저 떠오르는 것은 Styled Component입니다.

개인적으로 Styled Component를 자주 사용하고 있는 데 최근 한 프로젝트에서 Styled Component 관련해서 문제를 경험한 적이 있습니다.

스크롤 이벤트가 발생할 때마다 props를 변경시키면서 스타일을 변경시켰는 데 이벤트가 발생할 때마다 새로운 css 클래스가 생성되면서 엄청나게 많은 style이 삽입되었습니다. 해결책을 찾다가 해당 문제가 정상적인 동작이라고 판단하고 인라인 스타일을 적용하는 식으로 해결했는 데 이때 프로젝트 멘토님께 고민을 이야기하면서 얻은 키워드가 Zero Runtime CSS in JS였습니다.

Styled Component는 빌드 시간에 모든 스타일을 계산해서 생성하는 것이 아니라 런타임에 동적으로 스타일을 계산해서 추가합니다.

대부분의 경우 문제가 발생하지 않지만 스타일이 복잡할 경우 런타임에 성능 이슈가 발생할 수 있다는 이야기를 들었고 그래서 새롭게 프로젝트를 진행할 때는 이 Zero Runtime CSS in JS 패러다임의 라이브러리를 사용해보자고 결심했습니다. 그리고 그렇게 찾은 라이브러리가 Linaria였습니다.

Linaria는 어떤 방식으로 동작할까

사실 Zero Runtime CSS 라는 것은 예전에도 있었습니다. 하지만 과거에는 prop이나 state에 의한 동적 스타일링을 지원하지 않은 채로 단순한 정적 Styling 파일을 빌드 시간에 생성하는 것에 그쳤습니다.

Linaria는 이러한 문제를 CSS Variable을 사용해서 해결했습니다.

Linaria는 Babel Plugin과 Webpack Loader를 사용해서 빌드될 때 별도의 CSS 파일을 생성하게 되는 데 이 파일 안에서 prop이나 state 등에 의한 값들을 CSS Variable로 정의하고 CSS Variable의 값을 변경시킴으로써 동적 스타일링을 구현했습니다.

<div class="s1i7pj0x" style="--s1i7pj0x-1:translateX(100%);">

<div class="s1i7pj0x" style="--s1i7pj0x-1:translateX(0%);">

JS 코드 상에서 Linaria에 넘겨주는 Prop을 변경하게 되면 위와 같이 inline-style로 CSS 변수값이 변경됩니다. 그러면 CSS 스타일 내에서 해당 변수를 참조하고 있기 때문에 해당 요소에 적용되고 있는 스타일이 변하고 이로써 동적 스타일링이 구현됩니다.

Styled Component가 새로운 스타일 클래스를 만들고 그 클래스의 이름을 요소의 class 속성으로 넣어줌으로써 동적 스타일을 구현했다면 Linaria는 CSS 변수값만 바꿔줌으로써 이를 구현한 것입니다.

Trade Off

• CSS 변수를 사용한 방식이다보니까 브라우저 호환성에서 문제가 있습니다. IE11에서는 CSS 변수를 지원하고 있지 않기 때문에 IE11을 지원해야 하는 프로젝트에서는 Linaria가 아닌 다른 방식을 선택해야 합니다.

• Babel & Webpack을 사용하다보니까 직접 webpack 설정을 변경해줘야 합니다. 만약 CRA를 사용하고 있다면 eject를 해주고 loader를 설치해서 설정을 해줘야 하니 약간 번거로운 작업일 수 있습니다.

더 나아가기?

Runtime CSS in JS와 Zero Runtime CSS in JS 사이에 Near Zero Runtime CSS in JS라는 타협안도 존재합니다. 이름처럼 완전한 Zero Runtime은 아니지만 component prop에 의한 성능 저하를 최소화하려는 방향의 API를 제공한다고 하며 stitches.js와 같은 라이브러리가 이 패러다임을 기반으로 만들어졌다고 합니다.

추후 Runtime CSS in JS와 Zero Runtime CSS in JS에서 만족하지 못하고 중간의 무언가를 원할 때 Near Zero Runtime CSS in JS를 고려해보면 좋을 것 같습니다.