React css 작성법

css파일 임포트 방법

import common from './common.module.scss';
import './common.module.scss';

css를 임포트할때 객체명을 지정해서 불러오는것과 파일만 불러오는것에는 약간 차이가 있는데, 객체명을 지정해서 불러오는 방식으로 할때는 css파일만 다르다면 중복되는 클래스 사용도 가능하다는 것이다.

기본 css 문법은 다들 아시다시피 같은 클래스네임을 중복해서 사용이 불가하며 하단에 쓰인 속성으로 덮어 씌여진다.

객체형식으로 이름을 지정하여 불러올때는 파일이름.module.css 혹은 파일이름.module.scss 와 같이 .module.css 로 끝나야한다.

<div className={common.footer}>푸터</div>

그러면 위와같은 방법으로 common.scss에 작성된 .footer 클래스를 사용할수 있으며 똑같은 클래스명을 사용해도 다른 스타일이 적용된다.

글로벌 파일에 적용되는게 아니라 컴포넌트별로 스타일을 줄수있다.