🌈 CSS 파일 vs CSS Module 완벽 정리

프론트엔드 개발을 하다 보면 스타일을 적용할 때 style.css처럼 일반 CSS 파일을 사용하는 경우도 있고,
.module.css라는 조금은 생소한 확장자를 마주치는 경우도 있습니다.

이 둘은 어떻게 다르고, 언제 무엇을 써야 할까요?

---

🔍 CSS란 무엇인가?

CSS(Cascading Style Sheets)는 HTML 문서의 시각적 표현을 담당하는 스타일링 언어입니다.

/* style.css */
.button {
  background-color: #4caf50;
  color: white;
}

<button className="button">클릭</button>

• 이 스타일은 모든 컴포넌트, 모든 파일에서 사용할 수 있습니다.
• 즉, 전역(Global) 으로 작동합니다.

---

🧩 CSS Module이란?

CSS Module은 컴포넌트 단위로 스타일을 캡슐화하는 방식입니다.
파일 이름이 Something.module.css처럼 되어 있고, JS/TS 파일에서 객체처럼 불러와서 사용합니다.

/* Button.module.css */
.button {
  background-color: #4caf50;
  color: white;
}

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

<button className={styles.button}>클릭</button>

이렇게 하면 이 button 클래스는 오직 이 컴포넌트에서만 적용됩니다.

---

⚖️ CSS vs CSS Module — 비교 정리

항목	일반 CSS (.css)	CSS Module (.module.css)
적용 범위	전역	로컬 (컴포넌트 단위)
클래스 충돌	발생 가능 (주의 필요)	충돌 없음 (자동 해시 처리)
스타일 사용 방식	className="..."	className={styles.class}
코드 유지보스	규모가 커지면 어렵다	컴포넌트별로 관리 쉬움
선언 위치	어디서든 가능	import한 컴포넌트 내에서만 사용
권장 상황	전체적인 레이아웃, 폰트, 공통 스타일	컴포넌트 스타일, 재사용 컴포넌트

---

✅ 실제 사용 예시

📁 디렉토리 구조

src/
├── components/
│   ├── Button.tsx
│   └── Button.module.css
├── App.tsx
└── global.css

📄 Button.module.css

.button {
  background-color: royalblue;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  font-weight: bold;
}

📄 Button.tsx

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

const Button: React.FC = () => {
  return <button className={styles.button}>눌러주세요</button>;
};

export default Button;

📄 App.tsx

import React from 'react';
import './global.css'; // 전역 CSS
import Button from './components/Button';

function App() {
  return (
    <div className="app">
      <h1>CSS vs CSS Module</h1>
      <Button />
    </div>
  );
}

export default App;

---

💡 어떤 걸 선택해야 할까?

상황	추천 방식
리셋, 폰트, 전역 테마 설정	일반 CSS
버튼, 카드, 섹션 등 개별 UI 컴포넌트	CSS Module
대규모 팀 프로젝트	CSS Module (충돌 방지)

---

✅ 한 줄 요약

전역 스타일은 .css, 컴포넌트 스타일은 .module.css로!

---

📚 마무리

React에서 CSS를 다룰 때는 단순히 보이는 것만 생각하지 말고,
구조적으로 스타일이 어디까지 영향을 미치는가를 고려하는 것이 중요합니다.

CSS Module을 잘 활용하면 유지보수도 쉬워지고, 팀원 간 충돌도 줄일 수 있어요.