HTML Element를 return 하는 컴포넌트의 Prop 정의 방법 - prgrms-web-devcourse/Team_Alchomist_ShakeNMatch_FE GitHub Wiki

특정 컴포넌트의 prop을 지정할때, 지정한 prop들 의외에도 추가적인 prop들을 받게 하고 싶을때 유용하다. ( 즉, ...props 를 받아 사용하는것 ) HTMLAttribute 를 extends 해옴으로써 사용이 가능하다

• 예시 코드

export interface TextProps extends HTMLAttributes<HTMLSpanElement> {
  size?: SizeType;
  color?: string;
  bold?: boolean;
  block?: boolean;
}

다음과 같이 작성을 할경우, onClick 메소드를 부여하지 않아도, 해당 컴포넌트는 onClick 메소드를 전달받아 사용가능하다. ( 단, 해당 {...props}를 제네릭으로 전달한 HTMLElement 종류와 일치하는 태그에 전달하는것에 유의한다. )

<Text onClick={(): void => { console.log('hi!');}} {...props}> // 에러를 일으키지 않는다
  {props.children}
</Text>