[React] .css와 .module.css

(해당 글은 참고 글의 예시와 이미지를 사용했습니다)

프로젝트를 생성하면 App.module.css와 App.css 파일이 생깁니다. 두 파일의 차이점에 대해 알아보겠습니다.

우선 .module.css 파일은 같은 클래스 이름을 가진 다른 컴포넌트들과 충돌이 일어나는 문제를 해결하기 위한 용도입니다.

예를 들어 Button.js, Button.css, App.js, App.css 파일이 있습니다.

Button.js

import "./MyButton.css";

function MyButton({ text }) {
  return <button className="myButton">{text}</button>;
}

export default MyButton;

MyButton.css

.myButton {
  background-color: tomato;
  color: white;
}

App.js

import Button from "./MyButton";
function App() {
  return (
    <div className="App">
      <h1>Welcome back!</h1>
      <MyButton text="hello" />
      <button className="myButton">Everyone</button>
    </div>
  );
}

export default App;

App.css

.myButton {
  background-color: green;
}

"hello" 버튼과 "Everyone" 버튼을 다르게 디자인하고 싶었지만, 클래스 충돌로 인해 결과는 다음과 같이 나옵니다.

이때 module.css를 사용하면 클래스 충돌을 막을 수 있습니다.
우선 MyButton.css와 App.css파일을 Button.module.css와 App.module.css로 바꾼 후, 다음과 같이 사용하면 됩니다.

import styles from "./MyButton.module.css";

<button className={styles.myButton}>{text}</button>

---

참고

https://tori-tole.tistory.com/15?category=982907