[React] CSS Module 사용하기

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.

 

CSS Modules은 CSS 클래스 이름을 자동으로 고유하게 만들어주는 방법입니다. 이를 통해 각 컴포넌트에서 사용하는 CSS가 전역에 영향을 미치지 않게 할 수 있습니다.

• create-react-app을 사용하면, CSS Modules는 기본적으로 지원됩니다. .module.css 확장자를 사용하면 됩니다.

Button.module.css

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

Button.js

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

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

export default Button;

위의 코드에서 Button.module.css는 CSS Module을 사용하여 자동으로 고유한 클래스 이름을 생성합니다. styles.button을 사용하여 클래스 이름을 적용하면, 해당 CSS가 다른 컴포넌트의 스타일에 영향을 미치지 않습니다.

 

 

 

도움이 되셨다면 ❤️ 좋아요와 댓글로 피드백 주세요!

궁금한 점이 있다면 언제든지 질문 환영입니다 😄

지금까지 읽어주셔서 감사합니다!