[React] TypeScript Generic React Component

타입스크립트 제네릭 리액트 컴포넌트, 한글로 써봐도 한국어는 하나도 없습니다...

TypeScript Generic React Component #1 link

toc

import * as React from "react";

export interface Props<P> {
  genericProp: P;
}
 
const GenericSampleFirst: <P>(p: React.PropsWithChildren<Props<P>>) => React.ReactElement<Props<P>> = (props) => {
  return <div>{JSON.stringify(props.genericProp)}</div>;
};
 
export default GenericSampleFirst;

TypeScript Generic React Component #2 link

toc

import * as React from "react";

export interface Props<P> {
  genericProp: P;
}
 
const GenericSampleSecond = <P extends unknown>(props: React.PropsWithChildren<Props<P>>) => {
  return <div>{JSON.stringify(props.genericProp)}</div>;
};
 
export default GenericSampleSecond;

둘 다 잘 작동합니다. 첫 번째 방법은 TypeScript syntax를 성실하게 따랐고, 두 번째 방법은 tsx문법에서 타입 정의가 아닌 부분에 <P>(props)로 작성하면 <P>를 리액트 컴포넌트로 인식하기 때문에 extends unknwon이라는 트릭을 사용했습니다. 근-본을 좋아하시면 첫 번째 방법을, 실리를 추구하시면 두 번째 방법을 사용하시면 되겠습니다.

둘 모두 제가 발견한 방법들은 아니고 stackoverflow 돌아다니다가 찾았습니다. 출처를 다시 찾으려고 검색해봤는데 잘 안나옵니다. stackoverflow에서 비슷한걸 보시면 꼭 댓글 달아주세요.