clsx - 클래스를 조건부로 적용해보자

clsx란 무엇인가?

clsx는 조건에 따라 여러 CSS 클래스를 조합하여 하나의 문자열로 반환해주는 유틸리티 라이브러리이다. 주로 컴포넌트의 상태에 따라 동적으로 클래스명을 변경해야 하는 상황에서 유용하게 사용된다.

 

clsx의 주요 기능

• 조건부 클래스 적용
  • 객체 형태로 조건과 클래스를 전달하여 조건에 따라 클래스가 적용되도록 할 수 있다.
• 여러 클래스의 결합
  • clsx는 문자열, 객체, 배열 등 다양한 형태의 인수를 받아서 하나의 클래스로 결합해준다.
• 중복 클래스 제거
  • 동일한 클래스가 중복으로 전달되더라도 clsx는 하나로 처리하여 불필요한 중복을 제거해준다.

 

clsx는 CSS 클래스를 조건에 맞게 효율적으로 구성해주는 유틸리티로 특히 React 개발에서 자주 사용된다. classnames 라이브러리의 대체제로도 많이 쓰이며 가벼운 코드와 조건부 클래스 처리의 간편함이 장점이다.

 

장점

1. 가볍고 빠른 성능

clsx는 매우 가볍기 때문에 번들 크기에 큰 영향을 미치지 않는다.

또한 클래스 이름을 단순히 조합하는 기능만 제공하여 코드가 빠르고 효율적이다.

 

2. 가독성 향상

클래스를 조건부로 추가하는 코드를 작성할 때, clsx는 기존의 복잡한 논리 연산자(&&, ||) 사용을 줄여 가독성을 높인다.

특히 React 컴포넌트에서 클래스명을 조합하는 코드의 가독성을 크게 개선한다.

 

3. 유지보수 용이성

CSS 클래스 조건을 객체와 배열 형식으로 설정하기 때문에 추가, 제거가 간편하며 코드가 깔끔해 유지보수에 유리하다.

 

clsx 설치

 

clsx

npm install --save clsx

 

clsx 사용예제 

 

조건부 클래스 적용

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

console.log(buttonClass); // isPrimary와 isDisabled 상태에 따라 클래스가 동적으로 변경됨

 

배열 형태로 여러 클래스 적용

const buttonClass = clsx('btn', ['btn-lg', isPrimary && 'btn-primary']);
console.log(buttonClass); // "btn btn-lg" 또는 "btn btn-lg btn-primary"

 

동적 CSS 클래스 결합

const alertClass = clsx(
  'alert',
  isError ? 'alert-error' : 'alert-success',
  { 'alert-dismissible': isDismissible }
);

console.log(alertClass); 
// 상태에 맞는 "alert alert-error alert-dismissible" 혹은 "alert alert-success" 생성

 

className 속성에 clsx 결합

return (
  <button
    className={clsx(
      'btn',
      isPrimary && 'btn-primary',
      isDisabled && 'btn-disabled',
      isRounded && 'rounded-full'
    )}
    disabled={isDisabled}
  >
    Button
  </button>
);

 

clsx와 classnames 비교

npm 트렌드 이미지

classnames와 clsx는 비슷한 기능을 제공하지만 clsx는 classnames보다 가볍고 불필요한 처리를 줄였다는 점에서 차이가 있다.

5년간 사용 추세를 보면 classnames 라이브러리가 주로 사용되었다가 24년도 부터는 clsx가 classnames보다 사용 추세가 높아지고 있다.

 

clsx vs classnames

특징	clsx	classnames
번들 크기	매우 작음	상대적으로 큼
중복 제거	지원	지원
사용 방식	유사함	유사함
성능 최적화	우수함	일반적임

 

참고문헌

GitHub - lukeed/clsx: A tiny (239B) utility for constructing `className` strings conditionally.