더북(TheBook)

9.3.1 classnames

classnames는 CSS 클래스를 조건부로 설정할 때 매우 유용한 라이브러리입니다. 또한, CSS Module을 사용할 때 이 라이브러리를 사용하면 여러 클래스를 적용할 때 매우 편리합니다.

우선 해당 라이브러리를 설치하세요.

$ yarn add classnames

classnames의 기본적인 사용법을 한번 훑어 봅시다.

classnames 간략 사용법

import classNames from 'classnames';
 
classNames('one', 'two'); // = 'one two'
classNames('one', { two: true }); // = 'one two'
classNames('one', { two: false }); // = 'one'
classNames('one', ['two', 'three']); // = 'one two three'
 
const myClass = 'hello';
classNames('one', myClass, { myCondition: true }); // = 'one hello myCondition'

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.