[React] 라이브러리 import classNames from 'classnames';

 

import classNames from 'classnames';

 

classnames라는 외부 라이브러리를 불러오는 코드
주로 조건부로 클래스명을 쉽게 조합할 때 사용
=> 특정 조건에 따라 클래스명을 다르게 적용하고 싶을 때 편리

 

** 설치 필요

// npm
npm install classnames
//yarn
yarn add classnames

 

** 사용법

기존: <div className={`title-box ${isOpen ? "active" : ""}`}>
라이브러리 사용: <div className={classNames('title-box', { 'active': isOpen })}>

 

**예시 (기본)

import classNames from 'classnames';

const Box = ({ isActive }) => {
  return (
    <div className={classNames('box', { active: isActive })}>
      상태 박스
    </div>
  );
};

 

<Box isActive={false} />

=> isActive가 false라서 class에 active 미출력

<Box isActive />

=> isActive가 true면 active가 붙은 상태의 코드가 출력

 

 

** 예시 (여러 조건 사용)

const Notice = ({ isError, isWarning }) => {
  return (
    <div
      className={classNames('notice', {
        'notice-error': isError,
        'notice-warning': isWarning && !isError,
      })}
    >
      알림 메시지
    </div>
  );
};

 

** 예시 (배열처럼 사용)

const Button = ({ size }) => {
  return (
    <button
      className={classNames('btn', {
        'btn-sm': size === 'small',
        'btn-lg': size === 'large',
      })}
    >
      버튼
    </button>
  );
};

 

** 예시 (클래스명 문자열 사용)

const isDark = true;
const isRounded = false;

const className = classNames(
  'base-style',
  isDark && 'dark-mode',
  isRounded ? 'rounded' : null
);

console.log(className); // 'base-style dark-mode'