classNames 라이브러리

classNames 라이브러리

• 장점

  • CSS 클래스를 동적으로 설정할 때 매우 유용하며 조건에 따라 클래스 이름을 쉽게 추가하거나 제거할 수 있다.
  • 여러 클래스를 조건부로 적용해야 할 때 classnames를 사용하면 코드의 가독성이 크게 향상된다.

  const buttonClass = `btn ${isPrimary ? 'btn-primary' : ''} ${isLarge ? 'btn-large' : ''}`;
  
  const buttonClass = classNames('btn', {
    'btn-primary': isPrimary,
    'btn-large': isLarge,
  });
  

  • 여러 조건을 조합하여 클래스를 설정할 때 복잡한 논리를 단순화할 수 있다.(복잡한 삼항 연산자나 논리 연산자를 피할 수 있다.)

  const buttonClass = classNames('btn', {
    'btn-primary': isPrimary && !isDisabled,
    'btn-disabled': isDisabled,
  });

  • classnames는 빈 문자열이나 false, null, undefined와 같은 값들을 무시하여 클래스 이름을 생성하므로 불필요한 공백이나 클래스가 추가되지 않는다.

  const buttonClass = classNames('btn', undefined, false, 'btn-primary');
  // 결과: 'btn btn-primary'