pros-cons-css-in-js.md

CSS in JS 장단점

장점

1. 지역 스코프 스타일

• 일반 CSS 작성 시에는 실수로 의도한 것 보다, 더 광범위하게 스타일을 적용하기 쉽다.
• CSS-in-JS는 기본적으로 스타일을 지역 스코프로 지정하여 이 문제를 완전히 해결한다.
• 참고) CSS 모듈도 지역 스코프 스타일을 제공한다.

2. 코로케이션

• 일반 CSS 사용의 경우 모든 리액트 컴포넌트가 src/components에 있는 동안 .css 파일을 src/styles 디렉토리에 넣을 수 있다. 그런데 이런 경우 앱이 커짐에 따라 각 컴포넌트에서 어떤 스타일을 사용하는지 빠르게 구분하기 어려워진다.
• 즉, 사용하지 않는 스타일을 쉽게 구분할 수 없기 때문에 CSS에 사용하지 않는 코드가 표시되는 경우가 많아진다.
• 일반 CSS를 사용할 때의 문제는 CSS와 자바스크립트가 별도의 파일에 있어야 하고 .css 파일의 위치와 관계 없이 스타일이 전역으로 적용되기 때문에 코로케이션을 구현하기 어렵다는 점이다.
• 반면에 CSS-in-JS를 사용하는 경우 스타일을 사용하는 리액트 컴포넌트 내부에 직접 스타일을 작성 할 수 있다. 따라서, 앱의 유지보수가 편해진다.

3. 자바스크립트 변수를 style에 사용 할 수 있다.

• 스타일에서 자바스크립트를 사용함에 따라 중복을 줄일 수 있다.
  • 왜? 동일한 상수를 CSS 변수와 자바스크립트 상수로 나눠 정의할 필요가 없기 때문이다.

단점

1. CSS-in-JS는 런타임 오버헤드를 더한다.

• 컴포넌트가 렌더링 될 때, CSS-in-JS 라이브러리는 document에 삽입할 수 있는 일반 CSS로 스타일을 “직렬화”해야한다.
• 따라서 이런 부분이 추가 CPU를 차지 할 수 있다.

2. CSS-in-JS는 번들 크기를 늘린다.
3. CSS-in-JS는 React DevTools를 어지럽힌다.
4. CSS-in-JS라이브러리는 컴포넌트가 렌더링 될 때 새로운 스타일 규칙을 삽입해 작동하며 이는 근본적으로 성능에 좋지 않다.
5. 서버사이드 렌더링 혹은 컴포넌트 라이브러리 사용 시 잘못될 수 있다.

• 왜?
  • Emotion 의 여러 인스턴스가 한번에 로드 된다.
  • 컴포넌트 라이브러리는 스타일이 삽입 되는 순서를 완전히 제어할 수 없는 경우가 있다.
  • Emotion의 SSR 지원은 리액트 17과 18에서 다르게 작동한다.

컴파일 타임 CSS-in-JS

Emotion, styled-components 는 런타임 CSS-in-JS 이다. 반면 최근에는 컴파일타임 CSS-in-JS가 증가한다.

이러한 라이브러리는 성능 비용없이 CSS-in-JS와 유사한 이점을 제공한다. 하지만, Sass 모듈과 비교하면 여전히 아래와 같은 단점이 존재한다.

• 컴포넌트가 처음 마운트 될 때 스타일이 계속 삽입되어 브라우저가 모든 DOM 노드에서 스타일을 다시 계산하도록 한다.
• 여전히 ReactDevTools를 복잡하게 한다.