[React] module.css

CSS작명.module.css

 

 

◯정의

CSS로 style한 속성이 다른 components에서 적용되지 않게 하는 방법 중 하나 입니다. 보통 styled-components 라이브러리를 사용하지만 심각한 단점인 협업할 때 곤란한 것과 .js파일의 코드가 지저분하게 보일수 있다는 단점이 있어 module.css 사용하면 그런 단점을 보완할 수 있습니다. 

 

◯사용 방법 step

 

1. Components에 적용시키고 싶은  CSS 파일 생성

CSS작명.module.css // CSS파일 작명은 자유롭게 하면 됩니다.

 

2. 해당 Componentns에 module.css 파일 import 하기

import 자유작명 from 'css파일명.module.css' // 자유 작명 하면 객체가 생성됩니다

 

3. className={ 작명,클래스명 } 사용하기

<div className={작명.클래스명}>안녕</div>