[240604 til] clsx

오늘은 clsx 라이브러리를 사용해보고 핵심사항을 정리합니다.
clsx는 조건부로 클래스 이름을 결합할 수 있는 JavaScript 유틸리티 라이브러리입니다.
React와 함께 사용하기에 매우 유용합니다.
간단한 API로 여러 클래스 이름을 조건부로 결합하여 동적으로 클래스 이름을 생성할 수 있습니다.

주요 기능:

• 조건부 클래스 결합: 객체, 배열, 문자열 등 다양한 입력 형식을 지원합니다.
• 진리값 평가: 값이 true인 경우에만 해당 클래스가 포함됩니다.

사용 예시:

import clsx from 'clsx';

// 간단한 예시
const buttonClass = clsx('btn', {
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

// React 컴포넌트에서 사용
function Button({ isPrimary }) {
  return <button className={clsx('btn', { 'btn-primary': isPrimary })}>Click me</button>;
}

clsx는 성능이 우수하고, 특히 조건에 따라 클래스 이름을 동적으로 설정해야 할 때 유용합니다.

clsx는 클래스 이름을 동적으로 결합하는 데 유용한 라이브러리입니다. 위 예시에서 clsx 함수는 다음과 같은 방식으로 동작합니다:

1. 기본 사용

const buttonClass = clsx('btn', {
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

이 코드는 btn 클래스는 항상 포함되며, isPrimary가 참이면 btn-primary 클래스가 추가되고, isPrimary가 거짓이면 btn-secondary 클래스가 추가됩니다.

2. React 컴포넌트에서 사용

function Button({ isPrimary }) {
  return <button className={clsx('btn', { 'btn-primary': isPrimary })}>Click me</button>;
}

여기서 clsx는 btn 클래스를 항상 적용하고, isPrimary가 참일 때만 btn-primary 클래스를 추가합니다.