[CSS] css-module

css-module을 이용하면 클래스명이 충돌하는 단점을 극복할 수 있다.

css-module은 간결한 클래스명을 이용해서 컴포넌트 단위로 스타일을 적용할 때 좋다.

CRA 에서는 {이름}.module.css 라고 이름을 작성하면 css-module이 된다. 이때 module을 꼭써야 적용됨.

 

기존 css 같은 경우 예를들어 big 이라는 클래스명 css을 넣어줄려고한다고 생각해보자.

css 파일이 2개가 있고 하나는 Box1css 하나는 Box2.css 라고 이름을 붙이고 각각 다음과 같이 css 내용을 작성하고

// Box1.css
.big{ width : 200px; }

// Box2.css
.big{ width : 100; }

이것을 각각의 div에 넣어준다고 생각해보자.

import ‘./Box1.css’
import ‘./Box2.css’

...생략

return(<div className=’big’>)

런타임을 돌리거나 build를 하면 에러없이 잘 되지만 Box1과 Box2 의 css파일에서 쓰는 big이 같기 때문에 덮어씌어져서 하나만 적용이되게된다. 이렇게되면 큰 프로젝트가 될수록 이름중복을 고려해야하는데 이건 쉽지 않은 노력일것이다. 따라서 module을 쓰게되면 똑같은 big, small 로 지었더래도 Box1.module.css 와 Box2.module.css 로 모듈화하여 쓰게되면 고유 해쉬값이 붙기때문에 똑같은 이름이래도 각기 다르게 적용된다.

import box1 ‘./Box1.module.css’
import box2 ‘./Box2.module.css’


...생략
return (<div className={box1.big}>
<div className=’{box2.big}>)

console.log나 크롬 개발자 도구에서 elements 을 보면 고유값이 붙는걸 볼수있다.

<div class=”Box1_big__2nKg4”>

<div class=”Box2_big__1Kxga”>

 

이렇게 서로 같은 big을 쓰더래도 해쉬값이 붙어 고유해진다.