August 6, 2025

🧱 CSS-in-JS 과용: 런타임 오버헤드와 번들 크기 증가, 그리고 CSS 최적화 난항

React

CSS

성능

아키텍처

컴포넌트

빌드&번들링

렌더링전략

Summary

CSS-in-JS는 유용한 도구이지만, 과도하게 사용하면 런타임 오버헤드, 번들 크기 증가, CSS 최적화 난항 등 다양한 문제를 야기합니다. CSS Modules, Atomic CSS, 조건부 CSS-in-JS 사용 등의 대안을 고려하여 프로젝트 요구사항에 맞는 최적의 스타일링 전략을 선택해야 합니다.

Why Wrong?

CSS-in-JS는 컴포넌트 스타일링에 강력한 도구이지만, 모든 상황에 적합한 해결책은 아닙니다. 과도하게 사용하면 다음과 같은 문제점이 발생합니다.

런타임 오버헤드: CSS-in-JS는 브라우저가 HTML을 파싱한 후 JavaScript를 실행하여 스타일을 동적으로 생성하고 주입합니다. 이 과정은 기존 CSS 파일 로딩 방식에 비해 추가적인 런타임 오버헤드를 발생시켜 초기 렌더링 성능을 저하시킬 수 있습니다.
번들 크기 증가: CSS-in-JS 라이브러리는 자체적으로 상당한 크기를 가지며, 컴포넌트마다 스타일을 정의할 때마다 번들 크기가 증가합니다. 이는 초기 로딩 시간 증가로 이어져 사용자 경험을 저해할 수 있습니다.
CSS 최적화 난항: CSS-in-JS는 런타임에 스타일이 생성되므로, 사용하지 않는 CSS 규칙을 제거하는 Dead Code Elimination이나 CSS Minification과 같은 최적화 기법을 적용하기 어렵습니다. 이로 인해 불필요한 스타일이 계속 남아 번들 크기를 증가시키고 성능을 저하시킬 수 있습니다.
CSS 캐싱 문제: CSS-in-JS로 생성된 스타일은 보통 JavaScript 번들에 포함되므로, CSS 파일처럼 별도로 캐싱되지 않아 페이지 이동 시마다 스타일을 다시 생성해야 할 수 있습니다. 이는 사용자 경험을 더욱 악화시킬 수 있습니다.
SSR 성능: 서버 사이드 렌더링(SSR) 환경에서 CSS-in-JS를 사용하면 스타일을 서버에서 생성해야 하므로, 서버 자원을 소모시키고 TTFB(Time To First Byte)를 증가시킬 수 있습니다.

How to Fix?

CSS-in-JS를 사용할 때는 다음과 같은 사항을 고려하여 신중하게 적용해야 합니다.

CSS Modules: CSS Modules는 컴포넌트 스코프를 지원하면서도 CSS 파일로 관리되므로, CSS-in-JS의 장점과 기존 CSS의 장점을 모두 활용할 수 있습니다.
Atomic CSS: Tailwind CSS와 같은 Atomic CSS 프레임워크는 재사용 가능한 스타일 클래스를 제공하여 CSS 작성량을 줄이고 스타일 일관성을 유지할 수 있습니다.
조건부 CSS-in-JS: 컴포넌트의 스타일이 동적으로 변경되는 경우에만 CSS-in-JS를 사용하고, 정적인 스타일은 CSS 파일로 관리하는 방식을 고려할 수 있습니다.
적절한 CSS-in-JS 라이브러리 선택: 성능 최적화가 잘 된 CSS-in-JS 라이브러리를 선택하고, 필요한 기능만 사용하는 것이 좋습니다. (예: Linaria, Astroturf 등)
CSS 규칙 재사용: 디자인 시스템을 구축하여 스타일 규칙을 재사용하고, 테마를 활용하여 스타일 변경을 효율적으로 관리해야 합니다.

Before Code (Bad)

// 과도한 CSS-in-JS 사용 예시 (styled-components)
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

function MyComponent() {
  return (
    <div>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </div>
  );
}

After Code (Good)

// CSS Modules 사용 예시
import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div>
      <button className={styles.button}>Normal Button</button>
      <button className={`${styles.button} ${styles.primary}`}>Primary Button</button>
    </div>
  );
}

// MyComponent.module.css
.button {
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
}

.primary {
  background-color: palevioletred;
  color: white;
}

CSS Modules에 대한 공식 문서입니다. 컴포넌트 수준에서 CSS를 모듈화하여 스타일 충돌을 방지하고 재사용성을 높일 수 있습니다.

https://github.com/css-modules/css-modules

Tailwind CSS 공식 문서입니다. 유틸리티 우선 CSS 프레임워크로, Atomic CSS 방식을 통해 스타일 일관성을 유지하고 개발 속도를 향상시킬 수 있습니다.

https://tailwindcss.com/docs