[REACT] Class Variance Authority

CVA(Class Variance Authority)는 수많은 UI 컴포넌트를 일일이 작성하지 않고 함수처럼 재사용성을 고려해 유지보수성, 개발 속도를 증가시켜주는 라이브러리이다. 

 

1. install

npm i class-variants-authority

 

2. base

cva 함수의 첫번째 인자로 base가 들어간다. 기본적으로 들어가는 스타일링을 설정해줄 수 있다.

const buttonVariant = cva(" text-black font-bold " // base, 
	...
});

 

3. variants

cva 함수의 두번째 인자로 객체가 들어가는데, 객체 안의 첫번째 키로 variants를 지정해줄 수 있다.

variants 지정을 통해 재사용성이 높고 일정한 UI 컴포넌트를 개발할 수 있다.

const buttonVariant = cva("", {
	variants: {
		size: {
			sm: "px-2 py-2 text-sm font-medium",
			md: "px-2.5 py-2 text-base font-semibold border border-black",
		},
		intent: {
			primary: "bg-black",
			kakao: "bg-yellow-400",
		},
		outline: {
			true: "bg-white border",
			false: "text-white",
		},
		rounded: {
			none: "rounded-none",
			sm: "rounded-sm",
			md: "rounded-md",
			lg: "rounded-lg",
		},
	},
	...
});

size, intent, outline, rounded 키를 지정하였고 키에 대응하는 밸류값에 따라 스타일링을 설정하도록 작성하였다.

 

4. compoundVariants

compoundVariants는 두번째 인자인 객체에서 두번째 키값으로, 특정 variants를 조합했을 때 추가적으로 대응되는 스타일링을 적용시켜줄 수 있다. 이를 통해 더 재사용성이 높고 스타일링 자유도가 높은 컴포넌트를 개발할 수 있다.

const buttonVariant = cva(
	...
	compoundVariants: [
		{
			outline: true,
			intent: "primary",
			className: "border-black text-black",
		},
	],
    ...
});

 

위 코드에서는 outline이 true 이고 intent가 primary일 때 border-black과 text-black이 적용되는 코드이다.

 

5. defaultVariants

defaultVariants는 컴포넌트가 호출되었을 때 기본값으로 설정되는 variants를 작성하는 부분이다. 이를 통해 일일이 작성하지 않아도 기본값이 설정되어 속도 있는 개발이 가능하다

const buttonVariant = cva(
	...
	defaultVariants: {
		size: "md",
		intent: "primary",
		outline: false,
		rounded: "sm",
	},
});

 

6. 컴포넌트 props 타입 지정

원래는 props로 값을 받기 때문에 아래와 같이 일일이 타입 선언을 해주어야 했다.

interface ButtonProps = {
    size: {
        sm: string;
        md: string;
    };
    intent: {
        primary: string;
        kakao: string;
    };
    outline: {
        true: string;
        false: string;
    };
    rounded: {
        none: string;
        sm: string;
        md: string;
        lg: string;
    };
}

 

하지만 CVA를 활용해 위에 선언한 buttonVariant 변수를 기반으로 자동으로 타입 선언을 해줄 수 있다.

type ButtonVariant = VariantProps<typeof buttonVariant>;