clsx로 조건부 스타일 적용하기

clsx란?

---

clsx는 React에서 조건부로 CSS클래스를 적용하는데 유용한 js 유틸리티다.
이 패키지는 여러 클래스를 조합하거나 조건에 따라 클래스를 동적으로 추가할 때 사용되며,
가독성이 높고 유지보수가 용이한 코드를 작성하는 데 도움을 준다.

clsx 개념

---

clsx는 조건부로 클래스 이름을 적용할 수 있도록 도와주는 유틸리티 함수이다.
여러 클래스를 조합할 수 있으며, 조건부로 클래스를 추가할 수 있다.
또한 classnams의 경량화 버전으로 성능이 우수하다.

설치

---

npm install clsx 혹은 yarn add clsx

예시코드

---

테일윈드와 clsx를 함께 사용하여 테일윈드 CSS 클래스를 동적으로 적용하는 방법을 다뤄보겠다.

import React from 'react';
import clsx from 'clsx';

const Button = ({ primary, disabled }) => {
  // clsx를 사용하여 클래스를 동적으로 설정
  const buttonClass = clsx(
    'px-4 py-2 rounded', // 기본 테일윈드 클래스
    {
      'bg-blue-500 text-white': primary, // primary가 true일 때 테일윈드 클래스 추가
      'bg-gray-500 text-gray-200': disabled, // disabled가 true일 때 테일윈드 클래스 추가
      'cursor-not-allowed': disabled // disabled가 true일 때 커서 스타일 변경
    }
  );

  return <button className={buttonClass} disabled={disabled}>Click Me</button>;
};

export default Button;

결론

---

clsx와 테일윈드 CSS를 함께 사용하면 조건부로 스타일을 적용하는 작업이 매우 간단해진다.
clsx의 유연성과 테일윈드의 유틸리티 클래스를 결합하여, 더 가독성 높고 유지보수하기 쉬운 코드를 작성할 수 있다.