# 88 [udemy React 완벽 가이드 노트] CSS모듈 사용하기

강사는 styled-components를 설명해 준 이후 

CSS모듈을 설명하기 시작하며 이렇게 말했다. 

 

옳고 그른것은 없지만 본인은 CSS를 Javascript파일과 분리하는 것을 선호한다. 
나는 깔끔한 자바스크립트 파일이나 기본 CSS파일을 좋아한다.

 

 

 

styled-components로 스타일링 강의 전엔

리액트에 CSS파일을 만들어 

Javascript 파일에 className을 부여해서 만들었다. 

 

 

 

• CSS파일의 클래스네임은 범위가 정해지지 않은 전역스타일이다.

즉, 특정 파일이 아닌 전체적인 파일에 해당 클래스네임만 가지고 있다면 

스타일에 영향을 받을 수 있다. 

 

 

 

• 업그레이드를 위해 CSS Modules를 사용해본다.

css모듈은 그 기능이 지원되는 프로젝트에서만 사용가능하다. 

(실행되기 전 브라우저에서 코드를 변환하여야 하므로)

리액트에서는 지원되는 기능이다. 

 

 

 

 

CSS 모듈 사용법 

---

 

1. css파일의 명을 [파일명].module.css 로 파일명과 확장자 사이에 module을 추가해준다.
2. css 스타일을 쓰고자 하는 js파일에 import를 해준다. 
3. styles 객체 안에 프로퍼티로 추가한다.

Button.js 파일
 
import styles from './Button.module.css' ;

붉은 부분은 내 마음대로 바꾸어도 무방하다. 

 

 

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

 

css파일에서 임포트하고 있는 styles는 객체이다. 

styles 객체 안에서 정의한 각각의 클래스를 프로퍼티로 가질 수 있다.

css파일에 button클래스를 추가하면 button 프로퍼티를 가지게 되는 것이다. 

 

 

개발자 도구의 Elements안을 들여다 보면 

button의 class가

 

 

"컴포넌트 이름_클래스이름_고유한 해시값"

 

의 형태로 

변경되어 있는 것을 볼 수 있다. 

 

 

 

CSS 모듈이 하는 일 

---

CSS파일의 클래스명을 고유하게 바꾸어준다. 

 

 

모든 컴포넌트에 대해 

import하고 있는 css파일의 모든 클래스명을 다르게 바꾼다.  

즉, 각각의 컴포넌트에다가 import하는 css파일 속 클래스명을 변경해준다.

 

 이렇게 하면 css스타일의 범위(scope)가 import한 해당 파일의 컴포넌트에 한정되게 된다.