🥶 css-module 작성 시 classNames 패키지 설치 후 기능소개

우리가 평소 작업 할 때 태그에 클래스명을 정해서 css를 입힐 때 정말 자주 쓰는 단어들이 중복되어 스타일작업 시 곤란할 때가 종종 있다. 이걸 고유의 값으로 만들어 주는 것이 바로 css-modules이다. 이를 사용하면 일반적인 css 파일에서 클래스명이 충돌할 수 있는 단점을 극복 할 수 있다. 그리고 css-modules은 간결한 클래스명을 이용해 컴포넌트 단위로 스타일을 적용할 때도 좋다.

{이름}.module.css

CRA에서는 CSS파일 이름을 위와 같이 작성하면 css-module이 된다.

import style from './button.module.css';

<button className={`${style.button} ${style.big}`}>큰 버튼</button>
<button className={`${style.button} ${style.small}`}>작은 버튼</button>

css-module은 클래스명 정보를 담고 있는 객체를 내보낸다. css 파일에서 정의한 클래스명이 style객체의 속성 이름으로 존재한다. style객체를 출력한 결과는 다음과 같다.

{
 big:'button_big__1AXxh',
 small:'button_small__1G4lx'
 }

모듈로 클래스명을 정의함으로서 이렇게 클래스명 뒤에 해시값이 자동으로 들어가게된다. 그래서 다른 css파일에서 같은 이름의 클래스명을 사용하더라도 이름 충돌은 발생하지 않는다. 그리고 className에 속성값을 입력하는 코드가 번거롭고 가독성이 좋지 않는다고 생각이 된다면, classnames 패키지를 이용하면 코드를 개선시킬 수 있다.

터미널창에 아래와 같은 명령어로 classnames 패키지를 설치해주자.

$npm install classnames

import style from './box2.module.css';
import cn from 'classnames';

function Box({size}) {
const isBig = size === 'big';
const label = isBig ? '큰 박스' : '작은 박스';
return (
<div 
  className={cn(style.box, { [style.big]: isBig, [style.small]: !isBig})}
>
  {label}
</div>
);
}
export default Box;

이렇게 cn함수의 인수로 객체를 사용하면 조건부로 클래스명을 입력할 수 있다.
개인적으로 이게 더 어려워보이는데 직접 여러번 사용해보면 이게 더 쉬울 수도...? 있을랑가 🙄