11.1 CSS-in-JS의 단점

[hyeonseong2023]

📝 328p ❓ CSS-in-JS의 단점과 보완 방법 책에서는 CSS-in-JS의 장점만을 얘기하고 있는데, CSS-in-JS의 단점이 있는지, 있다면 이를 보완할 방법은 무엇이 있는지 알고 싶어요!

[gwangminjun]

CSS-in-JS 방식의 단점

1. 번들 크기 증가

   • CSS-in-JS 라이브러리 자체가 번들 크기에 추가됩니다.
   • Styled Components, Emotion 등의 라이브러리는 추가적인 코드를 포함하고 있어 번들 크기를 늘리게 됩니다.

2. 디버깅 난이도 증가

   • CSS와 JavaScript가 혼합되어 있어 디버깅이 더 어려울 수 있습니다.

3. 서버 사이드 렌더링(SSR) 복잡성

   • CSS-in-JS에서는 컴포넌트별로 스타일이 정의됩니다.
   • 이 스타일 정보를 서버에서 추출하여 클라이언트에 전달해야 합니다.
   • Styled Components나 Emotion 라이브러리는 이를 위한 API를 제공하지만, 적절한 구현이 필요합니다.

[fe-Jay]

CSS-in-JS의 단점

1. 런타임 성능 저하

• CSS-in-JS는 런타임에 JavaScript를 사용해 스타일을 동적으로 생성하므로 모바일 디바이스에서 CPU와 메모리 사용량을 증가시켜 성능 저하를 일으킬 수 있음.

2. 초기 랜더링 지연

• CSS-in-JS는 JavaScript가 로드되어야 스타일을 적용할 수 있기 때문에 CSS가 적용되지 않아 "스타일 없는 화면(FOUC, Flash of Unstyled Content)"이 나타날 수 있음.

2. 정적 CSS에 비해 복잡한 디버깅

• CSS-in-JS는 클래스 이름을 해시로 생성하기 때문에 클래스 이름이 명확하지 않아 브라우저 개발자 도구에서 디버깅이 어려움.

CSS-in-JS 단점의 보완 방법

1. 정적 CSS 추출

• CSS-in-JS 스타일을 빌드 시 정적 CSS 파일로 추출하여 런타임 생성 비용을 최소화.

  import { styled } from '@linaria/react';
  
  const Button = styled.button`
    background-color: blue;
    color: white;
  `;

2. 코드 분할 (Code Splitting)

• CSS-in-JS로 작성된 스타일을 컴포넌트 단위로 분리하고, 페이지별로 필요한 스타일만 로드.

  const LazyComponent = React.lazy(() => import('./LazyComponent'));
  
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>

[hyeonseong2023]

기존 CSS-in-JS의 단점

1. JavaScript로 CSS를 생성하는 과정에서 성능 저하
2. 라이브러리로 인한 번들사이즈 증가
3. 런타임에 헤드의 끝에 스타일시트를 삽입하기 때문에 SEO에 부적합

보완 방식

Atomic CSS(feat. Tailwind CSS)

	CSS-in-JS	Atomic CSS
스타일 정의	JavaScript 내에서 CSS 작성	HTML/JSX에서 미리 정의된 유틸리티 클래스 사용
런타임 오버헤드	JavaScript 실행 시점에서 스타일 생성 및 주입 필요	빌드 타임에 모든 스타일 생성 (제로 런타임)
번들 크기	CSS-in-JS 라이브러리 자체의 크기 추가	사용된 유틸리티 클래스만 포함되어 최적화
성능	런타임 계산 필요 SSR 시 추가 설정 필요	최적화된 정적 CSS 생성 SSR 친화적
유지보수	컴포넌트별 스타일 관리 용이 스타일 중복 가능성 존재	재사용 가능한 클래스로 중복 최소화 긴 클래스명으로 인한 가독성 이슈

예시 코드

// Tailwind CSS
<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
  버튼
</button>
// 순서대로 배경색, 텍스트, 패딩, 모서리, 호버