CSS Module

CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]__[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술

.module.css 확장자로 파일을 저장하면 CSS Module이 적용된다.

 

CSSModule을 사용하면 클래스 이름을 지을 때 고유성에 대해 고민하지 않아도 된다. 해당 클래스는 위에서 만든 스타일을 직접 불러온 컴포넌트 내부에서만 작동한다.

 

import styles from './Button.module.css';

CSS 모듈이 적용된 파일을 불러오면 객체(styles)를 하나 전달받게 되는데, 이 객체는 CSS 모듈에서 사용한 클래스 이름과 해당 이름을 고유화한 값이 키-값 형태로 들어 있다.

 

Button.module.css에는 button 클래스가 있다. -> styles에는 button 프로퍼티가 있는 것이다.따라서 적용할 때는 className={styles.[클래스 이름]} 형태로 적용하면 된다.

const Button = (props) => {
  return (
    <button type={props.type} className={styles.button} onClick={props.onClick}>
      {props.children}
    </button>
  );
};

 

해당 버튼 컴포넌트를 확인해보면 클래스 이름이 "컴포넌트이름_클래스 이름__고유한 해시값" 형태로 되어있는 것을 확인할 수 있다.

 

클래스 이름을 두 개 이상 적용하거나 조건부로 클래스 이름을 적용할 때는 다음과 같이 사용할 수 있다. 

<div className={`${styles['form-control']} ${!isValid && styles.invalid}`}>

 

 

일반적으로 css파일을 import하는 것은 범위가 정해지지 않은 전역 스타일을 사용하게 된다. 하지만 CSS Module은 이렇게 스타일의 범위를 css 파일을 import하는 컴포넌트로만 한정해서 사용할 수 있도록 도와준다.