Post

CSS-in-JS? 장점과 단점

Posted
By Dain Kang
2 min read

CSS-in-JS

CSS-in-JS는 단어 그대로 JavaScript 코드에서 CSS를 작성하는 방식이다.

런타임 환경에서 CSS와 컴포넌트를 이어주는 classname이 필요하기 때문에 각 컴포넌트를 hashing하여 동적인 classname을 만든다.

컴포넌트가 생성될 때 <head>에 <style>로 같이 생성되며 라이프사이클이 같다.

장점

  • CSS의 경우 네임스페이스 충돌을 막기 위해 별도의 class명 규칙을 적용해야 하지만 CSS-in-JS에서는 동적인 classname을 만들 수 있다.

  • 렌더링되는 구성 요소를 추적하여 해당 스타일만 삽입한다.

  • props 전달이 가능하여 컴포넌트의 상태에 따른 동적 코딩이 가능하다.

단점

  • 번들 크기가 커져서 초기 진입이 느려진다.

  • JS가 모두 로딩된 후에 CSS 코드가 생성되므로 인터랙션이 늦다.

  • 컴포넌트의 상태가 바뀌면 리렌더링이 발생하여 CSS를 다시 parsing한다.

정리

  • 초기 렌더링 최적화를 위해 현재 화면에서 필요한 CSS만 효율적으로 먼저 로딩해야 한다.

  • 인터랙션이나 속도가 중요한 웹사이트라면 CSS-in-JS보다는 CSS-in-CSS를 방식을 사용하는 것이 효율적일 수 있다.

  • css-loader나 sass-loader 같은 로더를 사용하면 CSS 파일을 분리해서 js 파일에서 import하여 사용할 수 있다. 이 방법으로 class명이 충돌하는 문제를 해결할 수 있다.

  • zero-runtime CSS-in-JS 라이브러리를 사용하면 StyleSheet를 새로 만들지 않고 css variable만 수정할 수 있다.

참고사이트

CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유
CSS-in-JS, 무엇이 다른가요?
모던 CSS : 1. CSS-in-JS

CSS
css
This post is licensed under CC BY 4.0 by the author.