[React] clsx 라이브러리

클래스 이름을 조건부로 병합하거나 동적으로 관리할때 사용

clsx

라이브러리 install

npm install clsx

yarn add clsx

 

import clsx from 'clsx';

function Button({ isPrimary, isDisabled, onClickEvent, text }) {
  const className = clsx('btn', {
    'btn-primary': isPrimary,
    'btn-disabled': isDisabled,
  });

  return(
  	<button
      type="button"
      onClick={onClickEvent}
      className={className}
    >
      {text}
    </button>
);
}

isPrimary가 true -> btn-primary 클래스 추가

isDisabled가 true -> btn-disabled 클래스가 추가

<li className={clsx({ [style.show]:
				(step > 1 && step < 5) || step === 9 },
				{ [style.selected]: step > 2 })}
>
  <button type="button">
    <span className={style.icon_box}>
      <Icon name="calendar_line" color="purple" />
    </span>
    <span className={style.title}>시작</span>
    <span className={style.text_box}>
      <Icon name="arrow_right" color="black" size={20} />
    </span>
  </button>
</li>

style.show가 적용되는 조건 -> step > 1 && step < 5 이거나 step === 9 일때,

step이 3 이상일 때 -> style.selected 클래스가 적용