classnames 패키지 사용법

✔️ 필요성

서로 다른 효과를 가진 css 코드를 하나의 컴포넌트에 병합해서 적용할 때 사용한다. array[ ] 로도 병합이 가능하지만 true/false boolean을 이용해서 특정 효과를 적용할 지 적용하지 않을 지 선택하는 것이 가능하다.

 

 

✔️ 설치

아래처럼 Dimensions를 활용해서 스크린의 너비를 가져오거나, 혹은 다른 어떤 value 값으로 지정해놓고 참조할 때 px를 까먹는 경우가 생길 수 있다. 나처럼...

// 둘 중에 하나
yarn add classnames 
npm install classnames

 

✔️ 사용 예시 (1)

아래 예시를 잘 보면 생각보다 사용하는 방법은 쉽다

className={classnames('box-info', 'mg-10')} // 'box-info mg-10'

className={classnames(['box-info', 'mg-10'])} // 'box-info mg-10'

className={classnames('box-info', {mg-10 : false})} // 'box-info'

className={classnames('box-info', {mg-10 : null})} // 'box-info'

className={classnames('box-info', {mg-10 : undefined})} // 'box-info'

className={classnames('box-info', {mg-10 : true})} // 'box-info mg-10'

className={classnames('box-info', {mg-10 : 'abc'})} // 'box-info mg-10'

 

✔️ 사용 예시 (2)

버튼을 클릭했을 때랑 아닐 때 css가 달라지도록 한다

import classNames from 'classnames';

const Sample = () => {
    const [isSelect, setSelect] = useState(false); //카테고리 토글
    return (
        <button
            className={classNames('tabList', { 'is-selected': isSelect })}
            onClick={onClickSelect}>
            {categoryList}
      	</button>
      );
}