9.3 CSS Module

    CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]__[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술입니다. CSS Module을 사용하기 위해 구버전(v1)의 create-react-app에서는 웹팩에서 css-loader 설정을 별도로 해 주어야 했지만, v2 버전 이상부터는 따로 설정할 필요 없이 .module.css 확장자로 파일을 저장하기만 하면 CSS Module이 적용됩니다.

    CSSModule.module.css라는 파일을 src 디렉터리에 생성하여 다음과 같이 한번 작성해 보세요.

    CSSModule.module.css

    /* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용 가능 */
     
    .wrapper {
      background: black;
      padding: 1rem;
      color: white;
      font-size: 2rem;
    }
     
    /* 글로벌 CSS 작성하고 싶다면 */
     
    :global .something {
      font-weight: 800;
      color: aqua;
    }

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.