- 전역 스타일 충돌 방지: 각 스타일이 로컬로 적용되어 다른 컴포넌트와 겹치지 않음.
- 컴포넌트 기반 스타일링: 스타일이 컴포넌트별로 관리되어 유지보수 용이.
- 명확한 클래스 네이밍: 클래스명이 자동으로 고유한 이름으로 변환되어 겹칠 걱정 없음.
- 재사용성: 컴포넌트 스타일을 다른 곳에서 재사용하기 쉬움.
- 동적 스타일링: 자바스크립트 객체로 클래스를 동적으로 제어 가능.
사용법
import styles from './Button.module.scss';
<button className={styles.button}>
Click Me
</button>
결론: CSS Module은 스타일 충돌을 방지하고, 컴포넌트 단위로 관리해 유지보수가 편리함.