Polymorphic 컴포넌트 Type-safe하게 만들기

AsProps 타입

type AsProp<C extends React.ElementType> = {
  as?: C;
};

선택적으로 as 속성을 받을 수 있는 타입.

`as` 속성은 `ElementType`을 상속받는 타입 `C`로 지정된다. 이 속성을 통해 사용자가 컴포넌트를 어떤 요소나 다른 컴포넌트로 렌더링할지 결정할 수 있다.

 

PropsToOmit 타입

type PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P);

`AsProp<C>`와 추가적인 프로퍼티 `P`를 결합한 타입에서 키를 추출한 타입.

컴포넌트가 기본적으로 가지는 프로퍼티(`C`) 중에서 `Props`로 지정된 사용자 정의 프로퍼티와 충돌할 수 있는 프로퍼티를 제거할 때 사용한다.

 

PolymorphicComponentProp 타입

export type PolymorphicComponentProp<
  C extends ElementType,
  Props = object,
> = PropsWithChildren<Props & AsProp<C>> &
  Omit<ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;

React 자식요소(`Children`)와 `as` 프로퍼티를 포함시키고, 컴포넌트 타입 `C`에서 충돌이 날 수 있는 프로퍼티와 `ref`와 같은 프로퍼티를 제외한 나머지 속성들을 포함시킨 타입.

이렇게 정의한 `PolymorphicComponentProp`은 컴포넌트가 다양한 요소로 렌더링될 수 있게 하면서도, 해당 요소의 타입에 맞는 프로퍼티들을 자동으로 조절하여 사용할 수 있다.

 

PolymorphicRef

type PolymorphicRef<C extends React.ElementType> =
  ComponentPropsWithRef<C>["ref"];

다형성 컴포넌트를 위해 사용되는`ref`의 타입. `React.ElementType`을 확장하는 컴포넌트 타입 `C`에 대해서, 해당 컴포넌트가 받을 수 있는 `ref`의 타입을 정확하게 지정한다.

• ["ref"]: `ComponentPropsWithRef`에서 `ref` 속성만을 추출하는 인덱스 접근 방식. 결과적으로, `PolymorphicRef<C>`는 `C` 타입의 요소에 따른 `ref` 타입을 반환한다.

 

PolymorphicComponentPropsWithRef

export type PolymorphicComponentPropsWithRef<
  C extends React.ElementType,
  Props = object,
> = PolymorphicComponentProp<C, Props> & { ref?: PolymorphicRef<C> };

`PolymorphicComponentProp`을 확장하여, `ref` 프로퍼티를 포함할 수 있는 타입으로, 다형성 컴포넌트에서 `Ref`를 사용해야할 ㄸ때 사용할 수 있다.

• PolymorphicComponentProp<C, Props>: 기존의 `PolymorphicComponentProp` 타입으로, `as` 프로퍼티 및 사용자 정의 프로퍼티를 포함하고, `PropsWithChildren`으로 감싸져 있어 자식 요소를 포함할 수 있다.
• { ref?: PolymorphicRef<C> }: 여기서 PolymorphicRef<C>는 `ComponentPropsWithRef<C>["ref"]`를 사용하여 `C` 타입의 요소에 대한 `ref` 타입을 추출한다.

 

 

Reference

https://github.com/ohansemmanuel/polymorphic-react-component

https://f-lab.kr/blog/polymorphism-with-type-safe

 

코드보고 끄적였는데 2번째 링크에 설명이 잘 나와있었다 🤩