[9주차] CSS-in-JS의 장단점

📌 본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요.

---

👼 장점

• 지역 스코프로 스타일을 적용한다.
  • CSS로 스타일링을 하면 클래스가 전역 스코프로 선언되기 때문에 클래스 이름이 중복된 경우 원치 않는 스타일링을 하게 될 수 있다.
• 스타일 코드를 관리하기가 쉽다.
  • .css 파일은 주로 src/styles 디렉토리에서 관리된다.
  • 컴포넌트가 많아지고, 프로젝트 규모가 커질수록 각 컴포넌트에서 어떤 스타일을 사용하는지 빠르게 구분하기 어렵다.
  • CSS-in-JS는 컴포넌트 파일에서 스타일까지 한번에 다룰 수 있다.
• 자바스크립트 변수를 스타일에 사용할 수 있다.
  • 동적 스타일링을 하기 쉽다.

👿 단점

• 런타임 오버헤드를 늘린다.
  • 렌더링될 때 document에 삽입할 수 있는 일반 CSS로 스타일을 직렬화한다.
  • 리렌더링을 하는 동안 모든 CSS 규칙을 재계산한다.
  • 이 과정에서 컴포넌트의 복잡도에 따라 앱의 성능에 영향을 끼친다.
• 번들 크기를 늘린다.
  • 사이트를 방문하는 사용자는 CSS-in-JS용 라이브러리를 다운로드해야 한다.
• React DevTools를 어지럽힌다.
  • SSR 또는 컴포넌트 라이브러리를 사용할 때 오류가 발생할 수 있다.