React CSS Module

Css Module

• CSS 클래스 중첩을 방지하기 위해 사용
• 확장자는 파일명.module.css
• 리액트에서 컴포넌트에서 해당 CSS를 불러들일 때 파일 경로, 파일 이름, 클래스 이름, 해쉬값 등을 사용해서 고유한 클래스명을 적용
•  레거시 프로젝트에 리액트를 도입하거나 CSS 클래스를 중복되지 않게 작성할 떄 네이밍 규칙을 정하기 귀찮을 때 사용하면 좋다.
• 또한 webpack에서 사용하는 css-loader에서 지원되기 때문에 CRA로 만든 프로젝트면 별도의 설치할 라이브러리가 없다.

Box.modul.css

.Box {
  background: black;
  color: white;
  padding: 2rem;
}

Box.js

import React from "react";
import styles from "./Box.module.css";

function Box() {
  return <div className={styles.Box}>{styles.Box}</div>;
}

export default Box;

실행결과

class를 보면  Box_Box__HHZuz라는 유니크한 클래스를 확인할 수 있다.