[React] CSS Module 사용 이유와 사용 방법

리액트로 컴포넌트를 만들다 보면 가장 흔하게 겪는 문제가 스타일 간섭이다.

A 컴포넌트의 스타일이 이름이 같다는 이유로 B 컴포넌트까지 망가뜨리는 상황이다.

이런 클래스 중복 문제를 해결하기 위해 등장한 것이 바로 CSS Module이다.

 

 

---

 

---

 

 

 

컴포넌트 단위의 스타일 격리

일반 CSS는 파일이 달라도 클래스명이 같으면 전역적으로 적용되지만, CSS Module은 해당 컴포넌트 안에서만 유효하다.

---

1. 사용법: .css 대신 .module.css 확장자로 생성
2. 장점: 컴포넌트와 스타일을 하나의 세트로 묶어 관리할 수 있어 유지보수가 편해짐

 

 

 

 

스타일을 '객체(Object)'로 다루는 방식

기존 CSS가 HTML에 클래스명을 "문자열"로 적어넣는 방식이었다면, CSS Module은 스타일을 자바스크립트 객체로 취급한다.

---

• import: import styles from "./Button.module.css"
• 적용: className={styles.title}
• 의미: 이제 스타일은 단순히 이름을 찾는 게 아니라, 특정 JSX 엘리먼트에 직접 주입하는 데이터가 된다. 오타가 나도 자바스크립트가 체크해주니 훨씬 안전함.

 

 

 

 

클래스 이름 중복 해결

스크린샷의 개발자 도구를 보면 CSS Module의 진가가 드러남!

---

• 상황: App과 Button 두 파일 모두 똑같이 .title이라는 클래스명을 사용했다.
• 결과: 리액트 빌드 시 App_title__YS7Xx, Button_title__1rPP- 처럼 고유한 해시값이 붙는다.
• 효과: 개발자는 클래스명이 겹칠까 봐 이름을 길게 지을 필요가 없다. .title이라고만 지어도 리액트가 중복되지 않게 관리해 준다.

 

 

 

---

✅ 요약

CSS Module은 클래스명 충돌을 원천 차단하고, 스타일을 컴포넌트에 종속된 객체로 관리하게 함으로써 '독립적인 컴포넌트'를 완성해준다.