[react.js]CSS Module 사용방법

설치

create-react-app2.0 부터는 설치 필요 없음 파일명 뒤에 module.css / module.scss 붙여주면 알아서 작동됩니다.

사용하는 이유

다른 컴포넌트에서 같은 클래스명을 사용해도 중복이 안되고 고유의 값을 가집니다. 예를 들면 .bg 라는 클래스를 사용해도 실제 구현에선 CssModule_bg_SFmwr 이렇게 됩니다.

사용방법

CssModule.js

import React from 'react';
import styles from './CssModule.module.scss';
const CssModule = () => {
  return <div className={styles.bg}>test</div>;
};

export default CssModule;

CssModule.module.scss

.bg {
  background: blue;
}

아주 간단히 적용되었네요.

이렇게 중첩해서도 쓸 수 있습니다.

CssModule.js

import React from 'react';
import styles from './CssModule.module.scss';
const CssModule = () => {
  return <div className={`${styles.bg} ${styles.txt}`}>test</div>;
};

export default CssModule;

CssModule.module.scss

.bg {
  background: blue;
}
.txt {
  color: white;
}

근데 매번 style style하려니 좀 귀찮네요.