[ 타입스크립트(TypeScript) ] ComponentProps로 props type 선언하기

📍 ComponentProps로 props type 선언하기

React에서 Component를 작성하다 고차 컴포넌트를 사용하기 위해 상위 단계에서 props를 받고 하위 단계에서 최종적으로 컴포넌트를 return 할 때 props의 타입을 명시해줘야 하는 경우가 있다.(그렇지 않으면 타입스크립트가 props의 타입을 모르기 때문에 컴파일 에러를 일으킨다.) 그럴 때 props의 타입을 전부 가져와서 재 선언하는 것은 번거롭다.

 

이럴 때 React.ComponentProps를 사용하면 타입을 다시 작성하는 번거로움을 피할 수 있다. React.ComponentProps의 자세한 설명은 다음과 같다. 만약, Ref를 사용하면 ComponentPropsWithRef를 사용하자.

728x90

    /**
     * NOTE: prefer ComponentPropsWithRef, if the ref is forwarded,
     * or ComponentPropsWithoutRef when refs are not supported.
     */
    type ComponentProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> =
        T extends JSXElementConstructor<infer P>
            ? P
            : T extends keyof JSX.IntrinsicElements
                ? JSX.IntrinsicElements[T]
                : {};
    type ComponentPropsWithRef<T extends ElementType> =
        T extends (new (props: infer P) => Component<any, any>)
            ? PropsWithoutRef<P> & RefAttributes<InstanceType<T>>
            : PropsWithRef<ComponentProps<T>>;
    type ComponentPropsWithoutRef<T extends ElementType> =
        PropsWithoutRef<ComponentProps<T>>;

    type ComponentRef<T extends ElementType> = T extends NamedExoticComponent<
        ComponentPropsWithoutRef<T> & RefAttributes<infer Method>
    >
        ? Method
        : ComponentPropsWithRef<T> extends RefAttributes<infer Method>
            ? Method
            : never;

나는 5번 라인의 type ComponentProps문을 사용했고 결론적으로 모노 레포로 관리하는 다른 패키지에 미리 선언된 컴포넌트의 타입을 재 선언하지 않았다.