1. Css Module이란 Css 사용시 Class 이름을 고유한값으로 자동 생성
2. React에서 Css Module을 사용한다면, Component에 적용하는 style 클래스의 이름이 중첩되는 현상을 방지하는 역할
3. 사용 방법은 파일명.module.css로 작성하고, className을 import하여 지정

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

const Button = () => <button className={styles.button}>Click me</button>;

export default Button;

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

1. 사용방법정리
   1. CSS 모듈 파일 생성 : 파일 이름을 [name].module.css 형식으로 지정
   2. CSS 클래스 정의 : 이 파일 내에서 일반 CSS와 같은 방식으로 스타일을 정의
   3. 리액트 컴포넌트에서 사용 : CSS Module을 import하여 사용. → CSS 파일이 객체로 취급
2. 사용이유
   1. 전역 스타일의 영향 없이 CSS 클래스의 로컬 스코프를 유지
   2. Styled-component와 같은 별도의 학습이 필요X
   3. 컴포넌트 내부에서 클래스 이름을 자동으로 고유화하여 충돌을 방지
   4. 추가 라이브러리 설치할 필요가 없음
   5. 정적 Css 파일을 사용해 JS 런타임에서 파싱하는 오버헤드를 피할 수 있어 JS 번들 크기를 줄임