[Typescript] 제네릭을 사용하는 타입 정의

두 가지 타입 정의의 주요 차이는 제네릭을 사용하는지 여부와 유연성이다.

---

1. 제네릭을 사용하는 타입 정의

type ButtonProps<T extends ElementType = 'button'> = {
  href?: string;
  color?: string;
  size?: string;
  className?: string;
  children: React.ReactNode;
} & ComponentPropsWithoutRef<T>;

특징(예시 설명)

1. 제네릭(T) 사용:
   • T는 기본값으로 'button'을 가지며, ElementType(React에서 사용 가능한 HTML 태그 또는 컴포넌트 유형)을 확장.
   • 개발자가 Button을 사용할 때 T를 통해 해당 컴포넌트의 타입을 동적으로 설정할 수 있다.
2. 유연성:
   • ButtonProps를 사용하는 컴포넌트가 <a> 또는 <div> 등 다양한 요소를 렌더링할 수 있도록 지원.
   • ComponentPropsWithoutRef<T>를 통해 T에 해당하는 모든 기본 HTML 속성을 props로 받을 수 있음.
3. 사용 예:
4. const Button: FC<ButtonProps<'a'>> = (props) => { // props에는 <a> 요소와 관련된 모든 기본 속성이 포함됨. };

장점

• 더 유연한 컴포넌트 작성이 가능.
• T를 통해 컴포넌트가 사용할 태그 유형을 지정하고, 그 태그와 관련된 기본 props를 자동으로 가져옴.

단점

• 제네릭을 사용하므로 타입 정의가 다소 복잡해짐.
• 기본적으로 제네릭 타입을 잘 모르는 개발자에게는 직관적이지 않을 수 있음.

2. 제네릭을 사용하지 않는 타입 정의

type ButtonProps = {
  href?: string;
  color?: string;
  size?: string;
  className?: string;
  children: ReactNode;
} & Omit<ComponentPropsWithoutRef<'button'>, 'href'>;

특징(예시 설명)

1. 정적 타입 정의:
   • 'button' 요소를 기본으로 한 props만 정의.
   • 추가로 href를 지원하기 위해 Omit을 사용하여 'button'의 기본 props에서 href를 제거한 후 href를 다시 추가.
2. 간단한 구조:
   • 제네릭을 사용하지 않아 타입 정의가 단순.
   • 기본적으로 'button' 요소를 사용할 것으로 가정한 컴포넌트에 적합.
3. 사용 예:
4. const Button: FC<ButtonProps> = (props) => { // props는 항상 <button> 요소와 관련된 속성으로 제한됨. };

장점

• 타입 정의가 단순하고 직관적.
• 'button' 요소를 기본으로 사용하며, 추가로 href와 같은 속성을 커스터마이징할 때 적합.

단점

• <a> 또는 <div> 같은 다른 태그 유형으로 확장하려면 별도의 타입 정의가 필요.

주요 차이점 비교

특징	제네릭 사용 (T extends ElementType)	제네릭 미사용 (정적 타입)
유연성	다양한 요소('a', 'div', 커스텀 컴포넌트`) 지원	기본 'button'에 제한
타입 안전성	사용된 태그에 따라 적절한 기본 props 자동 지원	'button' 요소에만 초점
복잡성	상대적으로 복잡	상대적으로 단순
사용 예시	다양한 요소로 확장 가능한 컴포넌트	기본 'button' 요소 중심의 컴포넌트

결론

1. 제네릭 사용 (T extends ElementType):
   • 유연한 컴포넌트가 필요하거나 다양한 태그로 확장 가능한 컴포넌트를 작성하려면 사용.
   • e.g., Button 컴포넌트가 <button>, <a>, <div> 등으로 렌더링 가능해야 한다면 적합.
2. 제네릭 미사용:
   • 간단히 특정 요소(예: 'button') 중심으로 작성할 때 사용.
   • e.g., Button 컴포넌트가 항상 <button>으로 렌더링되며, href만 추가적으로 지원하면 된다면 적합.