[React] clsx(): 클래스 이름(className)을 조건부로 결합 & 관리하는 유틸리티 함수

📌 clsx()

: 자바스크립트에서 조건부로 클래스 이름을 결합하고 관리하는 데 사용되는 유틸리티 함수

• 여러 개의 클래스를 조건에 따라 동적으로 쉽게 결합할 수 있도록 도와준다.
• 불필요한 빈 문자열이나 null, undefined 같은 값들을 자동으로 걸러준다.
• 조건부 UI를 만들 때 매우 유용하다.
• 주로 React 프로젝트에서 많이 사용한다.

 

 

⏩ 설치

npm install --save clsx

 

 

 

✅ 사용

clsx 불러오기

import clsx from 'clsx';

// or

import { clsx } from 'clsx';

 

 

 

☑️ 기능

 

여러 개의 문자열 결합

clsx('foo', 'bar'); // 'foo bar'

 

배열 형태로 클래스 이름 결합

clsx(['foo', 'bar']); // 'foo bar'

 

조건부로 클래스 추가

clsx('foo', isActive && 'active'); // (isActive가 true일 경우) 'foo active'
clsx('foo', isActive && 'active'); // (isActive가 false일 경우) 'foo'

 

객체의 키를 조건부로 추가

clsx({ 'foo': true, 'bar': false }); // 'foo'
clsx({ 'foo': true, 'bar': true });  // 'foo bar'

 

 

혼합된 입력 사용

clsx('foo', [isActive && 'active'], { 'hover': isHovered }); 
// (isActive가 true이고 isHovered가 true일 경우) 'foo active hover'

 

Falsy 값 무시

clsx('foo', null, undefined, 0, false, '', 'bar'); // 'foo bar'

 

 

 

• 문자열이나 조건부 클래스를 배열처럼 인자로 받아 하나의 문자열로 결합
  
  • className에 값이 없으면(null / undefined / 빈 문자열) ➡︎  clsx는 이를 무시하고 나머지 클래스들만 결합한다.
  • className에 값이 있다면 ➡︎ 그 값이 위의 기본 클래스들과 결합된다.

  const baseNavClasses = clsx(
    'text-sm py-2 px-4 text-indigo-800/70 rounded-full hover:text-indigo-800',
    className
  );

 

 

 

• isActive 상태에 따라 추가적인 클래스를 결합
  
  • isActive가 true ➡︎ 추가 클래스가 baseNavClasses에 결합된다.
  • isActive가 false ➡︎ baseNavClasses만 사용된다.

className={({ isActive }) => {
  return isActive
    ? clsx(
        baseNavClasses,
        'text-indigo-900 bg-indigo-100/40 border border-indigo-100/70 font-semibold'
      )
    : baseNavClasses;
}}

 

 

 

 

예제) 네비게이션 링크 스타일 정의 컴포넌트

• isActive가 true인 경우
  ➡︎ baseNavClasses에 추가로 'text-indigo-900 bg-indigo-100/40 border border-indigo-100/70 font-semibold'을 결합
• isActive가 false인 경우
  ➡︎ baseNavClasses 그대로 사용

import clsx from 'clsx';

function AppNavLink({ className, ...restProps }) {
  const baseNavClasses = clsx(
    'text-sm py-2 px-4 text-indigo-800/70 rounded-full hover:text-indigo-800',
    className
  );

  return (
    <NavLink
      className={({ isActive }) => {
        return isActive
          ? clsx(
              baseNavClasses,
              'text-indigo-900 bg-indigo-100/40 border border-indigo-100/70 font-semibold'
            )
          : baseNavClasses;
      }}
      {...restProps}
    />
  );
}

 

 

---

 

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