CSS module이란?

CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값

[파일 이름]_[클래스 이름]_[해시값]

이런 형태로 자동으로 만들어서 컴포넌트의 스타일 클래스 이름의 중첩을 방지해 주는 기술입니다.

구버전의 crate-react-app에서는 css-loader 설정을 별도로 해 주어야 했지만
v2 버전 이상부터는 따로 설정할 필요 없이
.module.css 확장자로 파일을 저장하기만 하면 CSS Module이 적용됩니다.

CSS module 사용해보기

CSS파일 작성

/* CSSModule.module.css */

/* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용 가능 */
.wrapper {
    background-color: black;
    padding: 1rem;
    color: white;
    font-size: 2rem;
}

/* 글로벌 CSS를 작성하고 싶다면? */
:global .something {
    font-weight: 800;
    color: aqua;
}

CSS파일을 사용할 컴포넌트 작성

이제 작성한 CSS Module을 사용하는 컴포넌트를 작성합니다.

// CSSModule.js

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

const CSSModule = () => {
    console.log(styles);
    return (
        <div className={styles.wrapper}>
            안녕하세요, 저는 <span className="something">CSS Module!</span>
        </div>
    );
};

export default CSSModule;

CSS Module이 적용된 스타일 파일을 불러오면 객체를 전달받게 되는데,
CSS Module에서 사용한 클래스 이름과 해당 이름을 고유화한 값이 키-값 형태로 이루어져 있습니다.

console.log(styles);

예를 들어 위에서 입력한 코드에서 이 부분을 확인해 보면 다음과 같은 결과가 나옵니다.

지정한 클래스의 이름 앞뒤로 파일명과 해시값이 붙은걸 확인할 수 있습니다.

이렇게 고유한 클래스 이름을 사용하려면

className={styles.클래스이름}

형태로 전달해 주면 됩니다.

실행화면

이제 컴포넌트와 스타일을 작성했다면 App.js에서 렌더링합니다.

// App.js

import CSSModule from "./CSSModule";

function App() {
  return (
    <div>
      <CSSModule/>
    </div>
  );
}

export default App;

CSS가 적용된 것을 확인할 수 있습니다.