classnames

classnames

설치

$> npm install classnames

npm 링크

classnames

classnames

용례

클래스를 여러 개 추가하고자 할 때나 특정 조건에 따라 클래스를 다르게 적용하고 싶을 때 사용하면 간단하게 클래스를 구현할 수 있다

간단한 사용례

import cx from 'classnames'

...
<div className={cx('default-class', 'sub-class')}></div>
// <div class="default-class sub-class"></div>

클래스를 여러 개 붙이고 싶을 때, cx의 인자로 서로 다른 클래스명을 넣어준다

import cx from 'classnames'

...
<div className={cx('aaa', 'bbb', 'ccc', 'ddd')}></div>
// <div class="aaa bbb ccc ddd"></div>

2개 이상도 된다 (가변 인자 가능)

배열로 여러 클래스 한번에 적용하기

import cx from 'classnames'

...
const CLASSARR = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
...
<div className={cx(CLASSARR)}></div>
// <div class="aaa bbb ccc ddd eee"></div>

배열 안에 있는 모든 문자열들이 클래스명으로 들어간다

import cx from 'classnames'

...
const CLASSARR = ['aaa', 'bbb', 'ccc', 123, true, false, 0x00ff];
...
<div className={cx(CLASSARR)}></div>
// <div class="aaa bbb ccc 123 255"></div>

boolean은 클래스명으로 들어가지 않고, 숫자는 자동으로 문자열처럼 들어간다

조건부 클래스 적용하기

import cx from 'classnames'

...
<div className={cx('default-class', {sub-class: false})}></div>
// <div class="default-class"></div>

<div className={cx('default-class', {sub-class: true)}></div>
// <div class="default-class sub-class"></div>

조건부 클래스는 객체를 넣어서 적용할 수 있다

value가 true일 때, key가 클래스로 들어간다

import cx from 'classnames'

...
const [boolState, setBoolState] = useState(false);
const [numState, setNumState] = useState(0);
...
<div className={cx('default-class', {sub-class: boolState})}></div>
<div className={cx('default-class', {sub-class: numState > 0)}></div>

상태값이나 각종 연산값들을 가지고도 참 / 거짓에 따라 클래스명을 적용할 수 있다

import cx from 'classnames'

...
<div className={cx('default-class', {sub-class: undefined})}></div>
<div className={cx('default-class', {sub-class: null)}></div>

undefined와 null은 false와 같이 동작한다 (클래스명 적용 X)

응용하기

import cx from 'classnames'

...
const [isClicked, setIsClicked] = useState(false);
...
const handleClickBtn = () => {
    setIsClicked((prevState) => !prevState)
}
...
<div className={cx('default-class', {'btn-clicked': isClicked})}></div>
<button onClick={handleClickBtn}>
    버튼이요
</button>

핸들러와 상태값을 적절히 사용하여 다른 요소의 동작에 따라 클래스명을 다르게 적용할 수도 있다

물론 객체에 값을 여러 개 넣을 수 있으므로 잘 쓴다면 클래스를 헷갈리지 않게 예쁘게 넣을 수 있다

value 값에는 boolean을 반환하는 함수를 넣어도 된다

CSS Module과 같이 사용하기

import cx from 'classnames'

import styles from './Testfile.module.scss'

...
<div className={cx(styles.divWrapper, {[styles.divClicked]: isClicked}></div>

CSS Moduler과 같이 사용하면 클래스명 고유값 설정과 classnames의 중복 클래스명 설정의 편리함을 둘 다 누릴 수 있다

단 styles.<클래스명> 과 같은 형식은 key 이름 설정이 불가능하므로 대괄호로 묶어주거나 classnames.bind를 사용하자

classnames.bind

import cx from 'classnames/bind'

import styles from './Testfile.module.scss'

const binded = cx.bind(styles);
...
<div className={cx('divWrapper'}></div>

bind를 이용하여 앞에 styles 등의 스타일명을 붙일 필요 없이 클래스명만 문자열으로 사용 가능하다

장점

간단한 프로젝트면 몰라도 규모가 큰 프로젝트는 조건부로 클래스명을 중복 적용하기가 복잡하다

객체 형식으로 예쁘게 클래스명과 조건식을 적용할 수 있어 가독성을 높여준다

코드는 가독성이 짱이다

참고자료

classnames 패키지 사용법

classnames 패키지 사용법