npm i clsx에 대해서 알아보자

React 기반 프로젝트를 진행하다 보면, HTML 요소에 다양한 조건에 따라 클래스를 부여해야 하는 상황이 발생합니다. 이때, className 문자열을 직접 이어붙이거나 삼항 연산자를 복잡하게 사용하는 대신, 직관적인 방법이 필요할 수 있습니다. 이 문제를 쉽게 해결해주는 라이브러리가 clsx입니다. 깔끔하게 처리하고 코드 가독성을 높여주는 역할을 합니다.

 

왜 clsx를 사용할까?

1. 조건부 클래스 처리의 단순화

   • clsx는 단순히 문자열을 합치는 대신, boolean값이나 객체 기반 클래스를 조건부로 적용할 수 있게 해줍니다. 이를 통해 className 속성에서 장황한 삼항 연산자 대신 간결하고 직관적인 코드를 작성할 수 있습니다.

2. 가독성 향상

   • clsx를 사용하면 중첩된 논리를 간편한 문법으로 추상화할 수 있습니다. 결과적으로 클래스명이 한눈에 파악 가능해지고, 협업 시 코드 리뷰나 유지보수도 쉬워집니다.

 

설치 방법

npm i clsx

 

사용 예시

import clsx from 'clsx';

function Button({ primary, disabled }) {
  return (
    <button
      className={clsx(
        'px-4 py-2',
        primary && 'text-white bg-blue-500 hover:bg-blue-600',
        disabled && 'opacity-50 cursor-not-allowed'
      )}
      disabled={disabled}
    >
      버튼
    </button>
  );
}

 

clsx의 주요 특징

1. 다양한 인자 형태 지원

   • 문자열, 객체, 배열, 조건문 모두 유연하게 인자로 받을 수 있어 상황에 따라 유연한 구성이 가능합니다.

clsx('base', { active: isActive }, ['additional', isOpen && 'open']);

2. Object 형태의 조건 할당

   • 객체 형태로 클래스를 할당할 때, key는 클래스명, value는 boolean 값으로 처리하므로 논리를 한눈에 파악하기 쉽습니다.

const classNames = clsx({
  'btn': true,
  'btn-primary': primary,
  'btn-disabled': disabled
});

clsx를 잘 사용하면 깔끔하게 명료해진다고 얘기하지만 호불호가 갈리는 라이브러리입니다. 오히려 로직이 복잡해져 조건부 클래스를 처리하는 패턴을 이해하지 못하는 경우가 발생하고 유지보수성이 떨어진다. 는 의견이 존재합니다. 따라서 협업 프로젝트 사용 할 경우 clsx라이브러리 사용 전 협의를 하시는 게 좋습니다.