React의 CSS 모듈은 고유한 클래스 이름을 자동으로 생성하여 CSS 범위를 지정하는 방법입니다. 이는 대규모 애플리케이션에서 클래스 이름 충돌을 방지하고 모듈식 스타일을 허용합니다. React 프로젝트에서 CSS 모듈을 사용하는 방법은 다음과 같습니다.

1. 설정

기본적으로 React는 CSS 모듈을 지원합니다. .module.css.

2. 예제 설정

파일 구조:

src/
├── components/
│   ├── Button.js
│   ├── Button.module.css

버튼.모듈.css:

.button {
  background-color: #6200ea;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #3700b3;
}

버튼.js:

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

const Button = () => {
  return (
    
      Click Me
    
  );
}

export default Button;

작동 방식:

• Button.module.css: 일반 CSS 파일처럼 CSS 규칙을 정의합니다.
• styles.button: CSS 모듈의 클래스 이름을 JavaScript 객체로 가져옵니다. styles.className.
를 사용하여 참조합니다.

이익:

• 범위가 지정된 스타일: 각 클래스는 이름 충돌을 방지하면서 구성 요소에 대해 로컬 범위로 지정됩니다.
• 유지관리성: 애플리케이션이 성장함에 따라 CSS는 모듈식으로 유지되며 관리하기가 더 쉽습니다.

특정 사례에 도움이 필요하면 알려주세요!