clsx 라이브러리

clsx는 조건부로 클래스 이름(className)을 구성할 때 유용한 도구이다.

clsx는 다양한 형태의 입력을 받아 클래스 이름을 생성한다.

사용 방법도 엄청 쉽다!!! 먼저 clsx를 import 한다.

import clsx from 'clsx';
// 또는
import { clsx } from 'clsx';

이제 clsx 함수를 사용할 준비가 되었다! 🙌

clsx는 가변 인자를 받을 수 있으며, 각 인자는 문자열, 객체, 배열, 또는 불리언 값이 될 수 있다.

문자열을 인자로 받는 경우:

clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

객체를 인자로 받는 경우:

clsx({ foo: true, bar: false, baz: isTrue() });
//=> 'foo baz'

배열을 인자로 받는 경우:

clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

여러 인자를 혼합하여 사용할 수도 있다🤩:

clsx('foo', [1 && 'bar', { baz: false, bat: null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'

clsx의 가장 큰 장점은 조건부로 클래스를 추가하거나 제거할 수 있다는 점이다.

falsy한 값(예: false, null, undefined, 0, NaN 등)은 모두 무시되므로, 조건에 따라 클래스를 동적으로 생성할 수 있다.

clsx(true, false, '', null, undefined, 0, NaN);
//=> ''

이렇게 clsx를 사용하면 복잡한 조건문 없이도 간결하고 읽기 쉬운 코드로 클래스 이름을 생성할 수 있다.

clsx는 단순한 유틸리티 라이브러리이므로 프레임워크에 구애받지 않고 자바스크립트, 타입스트립트 기반 프로젝트라면 유용하게 사용할 수 있다는 점도 매력적이다! 😎

clsx는 조건부 클래스를 다룰 때 코드를 깔끔하게 유지하고 가독성을 높이는 데 큰 도움이 된다.

프로젝트에 clsx를 도입한다면, 한층 더 간결한 코드를 기대할 수 있을 것이다☺️

참고자료

• clsx