TIL - 재사용 가능한 컴포넌트 만들기: class-variance-authority 활용

오늘은 class-variance-authority (CVA)를 사용하여 재사용 가능한 UI 컴포넌트를 만드는 방법을 학습했습니다. CVA는 다양한 스타일 변형을 정의하고 조합할 수 있는 유틸리티 라이브러리로, Tailwind CSS와 같은 스타일링 프레임워크와 잘 어울립니다.

 

예제 코드

import { cva } from "class-variance-authority";

const button = cva(["font-semibold", "border", "rounded"], {
  variants: {
    intent: {
      primary: [
        "bg-blue-500",
        "text-white",
        "border-transparent",
        "hover:bg-blue-600",
      ],
      secondary: [
        "bg-white",
        "text-gray-800",
        "border-gray-400",
        "hover:bg-gray-100",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  compoundVariants: [
    {
      intent: "primary",
      size: "medium",
      class: "uppercase",
    },
  ],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

button();
// => "font-semibold border rounded bg-blue-500 text-white border-transparent hover:bg-blue-600 text-base py-2 px-4 uppercase"

button({ intent: "secondary", size: "small" });
// => "font-semibold border rounded bg-white text-gray-800 border-gray-400 hover:bg-gray-100 text-sm py-1 px-2"

 

주요 개념

1. Variants 정의
   • variants 옵션을 사용하여 컴포넌트의 다양한 변형을 정의합니다. 예를 들어, intent와 size를 정의하여 버튼의 색상과 크기를 설정합니다.
2. Compound Variants
   • compoundVariants 옵션을 통해 여러 변형이 결합될 때 적용할 스타일을 정의할 수 있습니다.
3. Default Variants
   • defaultVariants 옵션을 사용하여 기본 변형 값을 설정할 수 있습니다.

 

참고 사이트

https://cva.style/docs