(블챌용) ComponentType, ComponentProps

ComponentType

• 컴포넌트 자체의 타입을 정의
• 컴포넌트의 전체 구조를 나타냄
• 함수형 또는 클래스형 컴포넌트 전체를 의미

type ComponentType<P = {}> = 
  | React.ComponentClass<P>
  | React.FunctionComponent<P>

// 사용 예시
const MyComponent: ComponentType<{name: string}> = (props) => {
  return <div>{props.name}</div>;
}

ComponentProps

• 특정 컴포넌트의 Props 타입을 추출
• 컴포넌트에 전달되는 속성들의 타입을 얻을 때 사용
• 컴포넌트의 props 구조만을 나타냄

type ComponentProps<T> = T extends React.ComponentType<infer P> ? P : never;

// 사용 예시
type ButtonProps = ComponentProps<typeof Button>;
// Button 컴포넌트의 props 타입을 추출

function wrapper(props: ComponentProps<typeof SomeComponent>) {
  // SomeComponent에 전달할 수 있는 props 타입
}

실제 사용 비교

import React, { ComponentType, ComponentProps } from 'react';

// Button 컴포넌트 정의
const Button: React.FC<{
  onClick: () => void;
  disabled?: boolean;
}> = ({ onClick, disabled }) => {
  return <button onClick={onClick} disabled={disabled}>Click</button>;
};

// ComponentType 사용: 컴포넌트 자체의 타입
const LoggedButton: ComponentType<{
  onClick: () => void;
  disabled?: boolean;
}> = (props) => {
  console.log('Button rendered');
  return <Button {...props} />;
};

// ComponentProps 사용: props 타입 추출
type ButtonPropsType = ComponentProps<typeof Button>;
// 이는 { onClick: () => void; disabled?: boolean; } 와 동일

// ComponentProps 활용 예시
function WrapperComponent(props: ComponentProps<typeof Button>) {
  return <Button {...props} />;
}