classnames

👀 classnames

classnames는 CSS 클래스 이름을 조건부로 쉽게 조합할 수 있게 도와주는 유틸리티 라이브러리이다. React, Vue 등에서 많이 사용되며, 특히 조건에 따라 클래스 이름을 동적으로 적용할 때 유용하다.

classnames를 사용하면 여러 클래스를 배열이나 객체로 묶어서 한 번에 적용 가능하며, 긴 문자열로 조건부 클래스 작성하는 것보다 훨씬 깔끔하여 가독성이 향상된다.

🌟 설치

npm i classnames

🌟 사용하기

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

// ex
// isActive이면 active적용
<div className={cx({'active': isActive })} >
// isActive이면 .cotainer.isActive적용
<div className={cx('container', { active: isActive })}>

📓 참고

공식문서 - CLASSNAMES 사용법