전체 코드

분석

사용한 라이브러리

• class-variance-authority
• tailwind-merge

개인 분석

• Button컴포넌트는 forwardRef를 사용한다.

ButtonProps

Button은 ButtonProps를 받는다.

1. Omit<InferredVariantProps, “color”>의 이유

InferredVariantProps는 buttonClasses로부터 변형(variants) 정보를 추출한 타입입니다. 이 타입에는 color, variant, size, loading 등의 속성이 포함되어 있습니다. 그런데, ButtonBaseProps에서 color를 직접 정의하고 싶기 때문에 InferredVariantProps에서 color 속성을 제외해야 합니다. 이 과정에서 Omit을 사용하여 InferredVariantProps 타입에서 color 속성을 제거한 후, ButtonBaseProps에서 다시 정의하는 것입니다.

왜 Omit이 필요한가?

• 타입 충돌 방지: 만약 Omit을 사용하지 않고 InferredVariantProps를 그대로 사용하면, color 속성이 두 번 정의되면서 타입 충돌이 발생할 수 있습니다. InferredVariantProps에 이미 color 속성이 포함되어 있는데, ButtonBaseProps에서 color를 다시 정의하기 때문에 타입스크립트는 이를 중복된 정의로 인식하게 됩니다. 이를 해결하기 위해 Omit으로 InferredVariantProps에서 color를 제거합니다.

  ts
  코드 복사
  // Omit을 사용하지 않으면 다음과 같이 충돌이 발생할 수 있음
  export type ButtonBaseProps = InferredVariantProps & {
    color?: ButtonColor; // color가 이미 InferredVariantProps에 포함되어 있음
  };
  
  

• color 타입 재정의: InferredVariantProps에서 가져온 color는 자동으로 추론되지만, ButtonBaseProps에서 원하는 방식으로 color 속성을 제어하기 위해 더 명확한 타입을 설정하고 싶을 때가 있습니다. 이 경우, color?: ButtonColor;로 color 속성에 대해 우리가 원하는 타입인 ButtonColor를 정의할 수 있습니다. 이처럼 color 속성을 구체적으로 설정하기 위해 Omit을 사용하여 중복된 color를 제거한 후, 직접 정의하는 방식입니다.

2. color?: ButtonColor;의 이유