[css] React - css.module

css.module은 React에서 CSS 스타일을 모듈화하고 컴포넌트 단위로 관리하기 위한 기술입니다. 이를 사용하면 전역으로 정의된 CSS 스타일이 아닌, 각각의 컴포넌트에서 사용되는 CSS 스타일만 해당 컴포넌트에 적용되어, 컴포넌트 간 스타일 충돌을 방지할 수 있습니다.

일반적으로 CSS 파일을 import하여 사용하는 것과는 달리, css.module은 CSS 파일을 JavaScript 모듈로 불러와서 사용합니다. CSS 모듈 파일의 이름은 {name}.module.css와 같은 형식으로 지정하며, React에서는 이를 컴포넌트와 함께 import하여 사용합니다.

예를 들어, 다음과 같이 Button 컴포넌트와 함께 Button.module.css 파일을 생성하여 CSS 모듈을 사용할 수 있습니다.

// Button.js

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

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

/* Button.module.css */

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

이렇게 작성된 코드는 Button 컴포넌트에만 적용되는 CSS 스타일을 정의하고, 컴포넌트에서는 styles.button과 같은 형태로 해당 스타일을 참조하여 사용합니다. 이를 통해 컴포넌트 간 스타일 충돌을 방지하고, CSS 코드를 모듈화하여 관리할 수 있습니다.