classnames 라이브러리 알아보기

classnames 라이브러리란?

• html에서 class를 사용하여 편하게 css를 쓸수 있지만 React에서는 class가 예약어로 사용중이기 때문에 이를 해결하기 위해 나온 라이브러리이다.

사용법

yarn add classnames

설치 후

import cn from 'classnames';

import를 선언 후에

<div  className={cn('check', {checked})} ></div>

이때 css 파일은 아래와 같다.

.check{
 
 ...
 
 &.checked{
 	color: red;
 }
}

//&은 부모선택자이다.