React css module

우선 css를 모듈화 시키기 위해서는 {NAME}.module.css 파일명 형식의 css파일이 필요하다.

.title 이라는 클래스명에 다음과 같은 스타일 속성을 주었다.

App.module.css

button {
  color: white;
  background-color: tomato;
}

.title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 50px;
  color: blueviolet;
}

App.module.css 를 AppCss라는 이름으로 import하고,
.title 의 속성을 주고 싶은 태그의 클래스 이름을 AppCss.className을 주면 해당 속성을 모듈화하여 할당 할 수 있다.

App.js

import Button from "./Button";
import AppCss from "./App.module.css";

function App() {
  return (
    <div className="App">
      <h1 className={AppCss.title}>Hello World!</h1>
      <Button text={"Button Component"} />
      <button>Just Button</button>
    </div>
  );
}

export default App;

가장 큰 장점으로는 개발자 도구에서 보면 알 수 있듯이,

클래스 이름의 중첩을 방지하기 위해 랜덤한 값의 클래스 이름이 할당되는 것을 볼 수 있다.
=> 다른 파일이 같은 클래스명을 사용해도 중첩되지 않는다.