CSS Module

CSS Module

CSS 클래스명을 겹치지 않게 해주는 웹팩 자체 기능이다

간단하고 작은 토이 프로젝트면 몰라도 프로젝트가 거대해질 수록 클래스명이 겹칠 위험이 매우 커진다

이때 CSS Module을 사용하면, CSS Module가 자체적으로 클래스명을 [파일명]_[클래스명]_[해쉬값] 으로 지정해주기 때문에 클래스명 중복 지정이 되지 않도록 방지해줄 수 있고, 더욱 깔끔한 파일간 연관성을 구성할 수 있다

CSS 파일 생성

.profileDiv {
  background-color: white;
}

.buttonDiv {
  color: white;
  background-color: teal;
}

이러한 CSS 파일 (사실 SCSS도 node-sass 모듈을 설치했다면 가능하다) 이 있다고 가정하자

파일명의 형식은 [파일이름].module.css 룰을 따르면 된다

파일명을 test.module.css 로 지어보자

import styles from './MenuProfile.module.scss'

function MenuProfile() {
  return (
    <>
      <div className={styles.profileDiv}>안녕하세요</div>
      <button type='button' className={styles.buttonWrapper}>
        버튼임당
      </button>
    </>
  )
}

export default MenuProfile

앞서 만든 CSS를 다음과 같이 import 하여 사용해보자

각 태그에 스타일을 적용하는 방법은 className에 CSS / SCSS에서 정의해둔 클래스명을 styles.[클래스명] 형식으로 불러오면 된다

import한 styles (이름은 굳이 styles일 필요는 없다) 에는 자바스크립트 객체가 들어있는데, CSS 파일 내에서 사용한 클래스명과, 클래스명을 앞에 설명한 형식 ([파일명]_[클래스명]_[해쉬값]) 으로 고유화한 값이 key-value 형태로 저장되어 있다

그리고 위의 styles에서 출력되었던 클래스명들이 실제 렌더링된 컴포넌트에도 잘 적용된 것을 볼 수 있다

결론

StyledComponents의 편리함 중 하나가 클래스명을 고유값으로 변환해주어 개발자가 굳이 클래스명을 생각하느라 골머리를 썩을 필요가 없다는 점이었는데, CSS Modules를 통해 Styled의 단점인 html 태그의 시각화를 지키면서 클래스를 고유값으로 넣어줄 수 있어 개발자 입장에선 매우 편리한 기능이라고 할 수 있겠다

사실 클래스명 중복되지 않게 이쁘게 짓는 것도 한두번이지 CSS 잔뜩 적용하다가 클래스만 수백개 만들다 보면 정말... 기억도 안 나고 한숨만 나온다

내장 기능을 적극 활용하여 머리를 덜 아프게 해 보자

참고자료

https://react.vlpt.us/styling/02-css-module.html

2. CSS Module · GitBook