[Daily morning study] CSS-in-JS vs CSS Modules 비교

13 Nov 2026 in Daily morning study / Frontend

#daily morning study

---

CSS 스타일링 방식의 발전

전통적으로 CSS는 별도의 .css 파일로 작성하고 HTML에 링크하는 방식이었다. React 같은 컴포넌트 기반 프레임워크가 등장하면서 스타일도 컴포넌트 단위로 관리하려는 흐름이 생겼고, 그 결과물로 CSS Modules와 CSS-in-JS가 등장했다.

CSS Modules

CSS 파일을 모듈처럼 import해서 클래스 이름을 자동으로 고유하게 만드는 방식이다.

동작 원리

빌드 타임에 클래스 이름을 [filename]__[classname]__[hash] 형태로 변환해서 전역 충돌을 방지한다.

/* Button.module.css */
.button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
}

.primary {
  background-color: #0056b3;
}

import styles from './Button.module.css';

function Button({ children, variant }) {
  return (
    <button className={`${styles.button} ${variant === 'primary' ? styles.primary : ''}`}>
      {children}
    </button>
  );
}

빌드 후 실제 HTML에는 Button__button__a1b2c 같은 고유한 클래스 이름이 적용된다.

장점

• 별도의 런타임 오버헤드 없음 (빌드 타임에 처리)
• 기존 CSS 문법 그대로 사용 가능
• 번들 크기가 작음
• 서버 사이드 렌더링(SSR)에서도 문제없음

단점

• 동적 스타일링이 번거로움 (인라인 스타일이나 클래스 조건부 추가로 해결)
• JS 변수를 CSS에 직접 사용하기 어려움
• 컴포넌트와 스타일 파일을 따로 관리해야 함

CSS-in-JS

JavaScript 코드 안에서 CSS를 작성하는 방식이다. 대표적인 라이브러리로 styled-components와 Emotion이 있다.

styled-components 예시

import styled from 'styled-components';

const Button = styled.button`
  padding: 8px 16px;
  background-color: ${props => props.primary ? '#0056b3' : '#007bff'};
  color: white;
  border-radius: 4px;

  &:hover {
    opacity: 0.9;
  }
`;

function App() {
  return (
    <>
      <Button>기본 버튼</Button>
      <Button primary>주요 버튼</Button>
    </>
  );
}

동작 원리

1. 컴포넌트가 처음 렌더링될 때 JS가 CSS 문자열을 파싱
2. 고유한 클래스 이름 생성 (예: sc-aBcDeF)
3. <style> 태그에 CSS 삽입
4. props 변화에 따라 동적으로 CSS 업데이트

장점

• props 기반 동적 스타일링이 자연스러움
• JS 변수, 함수, 테마를 CSS에 직접 활용 가능
• 컴포넌트와 스타일을 한 파일에서 관리
• 자동 vendor prefixing

단점

• 런타임 오버헤드: JS에서 CSS를 처리하므로 성능에 영향
• 번들 크기 증가 (styled-components 기준 약 15KB gzip)
• SSR 설정이 복잡함 (스타일 직렬화 필요)
• 클래스 이름이 동적으로 생성되어 디버깅이 어려움

성능 비교

항목	CSS Modules	CSS-in-JS (런타임)
번들 크기	작음	라이브러리 추가됨
초기 렌더링	빠름	약간 느림 (JS 파싱)
동적 스타일	클래스 조합으로 처리	props로 직관적 처리
SSR	간단	별도 설정 필요
CSS 파싱 주체	빌드타임	런타임

Zero-runtime CSS-in-JS의 등장

기존 CSS-in-JS의 성능 문제를 해결하기 위해 빌드 타임에 CSS를 추출하는 zero-runtime 방식이 등장했다.

• Linaria: 런타임 없이 static CSS 추출, CSS Modules처럼 동작
• vanilla-extract: TypeScript 기반 type-safe CSS, 빌드타임 처리
• Panda CSS: utility-first + 빌드타임 추출

// vanilla-extract 예시
import { style } from '@vanilla-extract/css';

export const button = style({
  padding: '8px 16px',
  backgroundColor: '#007bff',
  color: 'white',
  borderRadius: '4px',
});

동적 스타일은 CSS custom properties(변수)를 활용해서 처리한다.

선택 기준

상황	추천 방식
성능 중요, SSR 환경	CSS Modules 또는 zero-runtime CSS-in-JS
동적 스타일이 많은 UI	CSS-in-JS (styled-components, Emotion)
타입 안전성 중요	vanilla-extract
Next.js App Router	CSS Modules (서버 컴포넌트 호환)
소규모 프로젝트	CSS Modules로 시작이 무난

Next.js 13+ App Router에서는 서버 컴포넌트가 기본이기 때문에, 클라이언트 런타임이 필요한 styled-components 같은 라이브러리는 'use client' 지시어가 있는 컴포넌트에서만 사용 가능하다. 그래서 Next.js 공식 문서에서도 CSS Modules를 기본 스타일링 방법으로 권장한다.