CSS-in-JS의 장단점

CSS-in-JS

CSS-in-JS란 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 스타일링 하는 방법을 말한다.

 

👍 장점

1. 지역 스코프 스타일
   일반 CSS를 작성할 때는 실수로 의도한 것보다 더 광범위하게 스타일을 적용하기 쉽다. 하지만 CSS-in-JS는 기본적으로 스타일을 지역 스코프로 지정하여 이 문제를 완전히 해결한다.
   
   
2. 코로케이션
   일반 CSS를 이용할 경우 모든 리액트 컴포넌트가 src/components 에 있는 동안 .css 파일을 src/styles 디렉토리에 넣을 수 있다. 이런 경우 앱이 커짐에 따라 각 컴포넌트에서 어떤 스타일을 사용하는지 빠르게 구분하기 어려워진다. 사용되지 않는 스타일을 쉽게 구분할 수 없어서 CSS에 사용하지 않는 코드가 표시되는 경우가 많아진다.
   
   일반 CSS의 문제는 CSS와 자바스크립트가 별도의 파일에 있어야 하고 .css 파일의 위치와 관계없이 스타일이 전역적으로 적용되기 때문에 코로케이션(같은 곳에 위치하는 것)을 구현하기 어렵다는 점이 있다. 하지만 CSS-in-JS는 스타일을 사용하는 리액트 컴포넌트 내부에 직접 스타일을 작성할 수 있고, 덕분에 앱의 유지보수가 크게 편리해진다.
   
   
3. 자바스크립트 변수를 style에 사용할 수 있는 점
   CSS-in-JS를 사용하면 스타일 규칙을 작성할 때 자바스크립트 변수를 참조할 수 있다. 
   
   

 

👎 단점

1. 런타임 오버헤드를 더한다.
   컴포넌트가 렌더링 될 때 CSS-in-JS 라이브러리는 document에 삽입할 수 있는 일반 CSS 스타일을 '직렬화'해야 한다. 이런 부분이 추가 CPU를 차지한다.
   
   
2. 번들 크기를 늘린다.
   사이트를 방문하는 각 사용자는 CSS-in-JS 라이브러리용 자바스크립트를 다운로드해야 한다. 용량이 엄청 큰 것은 아니지만, 라이브러리에 따라 8~13kB 정도의 용량이 추가된다.
   
   
3. DevTools를 어지럽힌다.
   CSS 프로퍼티를 사용하는 각 요소에 대해 필요한 컴포넌트를 모두 렌더링한다. 많은 요소에서 CSS 프로퍼티를 사용하는 경우 내부 컴포넌트가 React DevTools를 어지럽힐 수 있다.

 

 

참고 자료

(번역) 우리가 CSS-in-JS와 헤어지는 이유