CSS 모듈

• CSS 파일은 파일명.module.css 확장로 만들어야 한다.
• CSS 클래스명을 로컬 스코프로 만들어서 클래스명 충돌방지
• composes : css파일에서 composes로 상속받으면 단일 클래스만 써도 됨

CSS 모듈 사용법

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

.primary {
  background-color: green;
}

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

function Button() {
  return (
    <button className={styles.button}>클릭</button>
  );
}

동작 원리

/* 작성한 코드 */
.button { color: blue; }

/* 실제 변환된 코드 */
.Button_button__2Rfj3 { color: blue; }

<button class="Button_button__2Rfj3">클릭</button>