css-in-js와 css-zero-runtime에 대해 아시나요?css-in-js는 js파일에서 css를 작성하여 자바스크립트 변수와 로직을 이용하여 스타일링 변화를 줄 수 있습니다. 대표적으로 styled-component와 emotion 라이브러리가 있습니다.
해당 라이브러리르 사용하여 동적으로 스타일을 변화를 주게된다면 새로울 스타일이 주입하게됩니다. Css Parsing과 렌더트리가 다시구축되면서 렌더링이 발생하게 되는 성능 이슈와 자바스크립트의 실행뒤 UI가 렌더링 되거나 실패로 인하여 렌더링이 되지않는 문제가 생겼습니다.
런타임에 css를 생성하는게 아닌 build 타임에 생성하도록 하는 zero-runtime-css가 각광을 받았고, 대표적으로 linaria와 vanilla-extracts가 있습니다.
near zero run time 이라는 개념도 있는데 이는 동적으로 변경될 css를 미리 정의하여 사용하는 형태입니다. 대표적인 라이브러리로 stitches 가 있습니다.
참고링크 :css-in-js 라이브러리 코드로 파악해보는 css-in-js의 이모저모
