React 교재 · 고급 19편

React CSS 전략 — Tailwind · Modules · CSS-in-JS

3 전략 중 무엇을 언제. 2026 년 트렌드와 회사 stack 기준 권장.

세 가지 스타일 접근 카드와 선택 라인 일러스트 — CSS 전략 비교 컨셉

React 컴포넌트의 스타일을 어디에 두냐. 일반 CSS 파일? 컴포넌트 안 JS? 유틸리티 클래스만? 답이 하나가 아니다. 2026 년 기준 3 대 전략 — Tailwind CSS·CSS Modules·CSS-in-JS — 가 시장을 나눈다.

이번 19편은 3 전략의 정확한 비교 + 회사 stack 기준 권장 + 마이그레이션 패턴. 신규 프로젝트면 거의 무조건 Tailwind 가 답이지만 그 이유를 정확히.

1. 3 전략 한 줄 정리

전략	한 줄	예시
Tailwind CSS	유틸리티 클래스를 JSX 에 직접 박음	<div className="flex gap-4 p-6 bg-white">
CSS Modules	파일별 스코프 CSS, 클래스명 자동 고유화	import s from './X.module.css'; <div className={s.card}>
CSS-in-JS	JS 안에서 CSS 작성 (styled-components 등)	const Card = styled.div`padding: 24px;`;

2. Tailwind — 2026 년 1순위 권장

// 설치
npm install -D tailwindcss @tailwindcss/vite
// vite.config.ts 에 플러그인 추가, main.css 에 @import "tailwindcss";

// 사용 — JSX 에 직접
function Card({ title, children }) {
  return (
    <div className="bg-white rounded-xl shadow-sm p-6 border border-slate-200">
      <h2 className="text-xl font-bold text-slate-900 mb-3">{title}</h2>
      <div className="text-slate-600 leading-relaxed">{children}</div>
    </div>
  );
}

처음 보면 "어우 클래스 너무 많아" 거부감 자연스럽다. 하지만 실전 1주만 쓰면 다른 방식으로 돌아갈 이유가 사라진다.

Tailwind 의 진짜 장점 — ① CSS 파일을 여닫을 일이 없음 (전부 JSX 안). ② 미사용 클래스 자동 제거 (production 번들 ~10KB). ③ 디자인 시스템 강제 (spacing·color 가 enum). ④ IDE 자동완성으로 빠르게 작성. ⑤ 다크 모드·반응형이 prefix 한 줄. 회사 stack 에 들어가 있는 이유.

3. CSS Modules — Tailwind 가 부담스러우면

/* Card.module.css */
.card { padding: 24px; background: white; }
.title { font-size: 20px; font-weight: 700; }

// Card.tsx
import s from './Card.module.css';

function Card({ title }) {
  return (
    <div className={s.card}>
      <h2 className={s.title}>{title}</h2>
    </div>
  );
}

빌드 시 s.card 가 _Card_module__card_a4b3c 같은 고유 이름으로 변환. 다른 파일의 .card 와 충돌 안 함. 일반 CSS 의 한계 (글로벌 네임스페이스) 를 깨끗이 해결.

적합 — CSS 문법에 익숙한 개발자, Tailwind 학습이 부담, 디자이너가 직접 CSS 작성하는 환경. Vite 가 기본 지원.

4. CSS-in-JS — 트렌드 하락

styled-components·Emotion 으로 대표되는 패턴. 2018~2022 황금기 → 2023 이후 빠르게 쇠퇴.

import styled from 'styled-components';

const Card = styled.div`
  padding: 24px;
  background: ${props => props.theme.bg};
`;
function App() { return <Card>...</Card>; }

왜 쇠퇴하나 — ① 런타임 스타일 계산 비용. ② React 18 의 Server Components 와 호환 어려움 (22편). ③ Next.js App Router 에서 추가 셋업 필요. ④ Tailwind 가 같은 문제 (스코프·동적 스타일) 를 더 가볍게 해결. 신규 프로젝트엔 비권장. 기존 코드베이스 유지 정도.

5. 선택 가이드 + 마이그레이션

상황	권장
신규 프로젝트	Tailwind 우선. 디자인 시스템·번들 크기·생산성 압도
대형 디자인 팀 (디자이너 직접 작성)	CSS Modules. CSS 그대로라 디자이너 친화
styled-components 기존 코드	유지하며 신규 부분만 Tailwind 점진 도입
Next.js App Router	Tailwind 또는 CSS Modules. CSS-in-JS 피하기
완성된 디자인 시스템 컴포넌트 라이브러리 필요	shadcn/ui (Tailwind 기반)

마이그레이션 팁 — Tailwind 는 다른 CSS 와 충돌 없음. 새 컴포넌트는 Tailwind, 기존은 그대로 두는 점진 도입이 가장 안전. styled-components 에서 한 번에 전환은 비용 큼 — 컴포넌트 5개 정도 변환한 뒤 팀이 합의되면 본격 진행.

19편으로 React 의 "보이는" 부분 정리 완료. 20편부터는 안정성 — TypeScript 통합으로 React 의 진짜 production 코드 만드는 법.

React 교재 20편 — TypeScript 통합. .tsx 파일, Props 타입, 제네릭 컴포넌트, 흔한 타입 패턴 7가지.