CSS Module이 적용된 스타일 파일을 불러오면 객체를 하나 전달받게 되는데 CSS Module에서 사용한 클래스 이름과 해당 이름을 고유화한 값이 키-값 형태로 들어 있습니다. 예를 들어 위 코드에서 console.log(styles)를 한다면 다음과 같은 결과가 나타납니다.

{ wrapper: "CSSModule_wrapper__1SbdQ" }

우리가 지정한 클래스 이름 앞뒤로 파일 이름과 해시값이 붙었지요?

이 고유한 클래스 이름을 사용하려면 클래스를 적용하고 싶은 JSX 엘리먼트에 className= {styles.[클래스 이름]} 형태로 전달해 주면 됩니다. :global을 사용하여 전역적으로 선언한 클래스의 경우 평상시 해 왔던 것처럼 그냥 문자열로 넣어 줍니다.

CSSModule 관련 컴포넌트와 스타일을 모두 작성했다면 App 컴포넌트에서 렌더링해 주세요.

App.js

import React, { Component } from 'react';
import CSSModule from './CSSModule';
 
class App extends Component {
  render() {
    return (
      <div>
        <CSSModule />
      </div>
    );
  }
}
 
export default App;

---