React 컴포넌트(children) 타이핑하기

 

📌 무슨 타입을 써야하지..? 🤔

TypeScript 와 함께 React 프로젝트를 개발하다보면 컴포넌트에서

children 을 prop 으로 받아서 사용하고 이에 대한 인터페이스를 정해줘야 하는 경우가 있습니다.

 

export default function Component({ children }) {
    return (
        <div>
            자식 컴포넌트를 렌더링합니다.
            { children }
        </div>
    )
}

 

이럴때마다 항상 고민인 부분이 children 에 어떤 타입을 명시해야 하는 것인가? 에 대한 것입니다.

이번 포스트에서는 이 부분에 대한 고민을 해결하고자!

React 컴포넌트의 children 에 할당 가능한 타입들에 대해서 간단하게 정리해보겠습니다.

 

📌 React 에서 제공하는 여러가지 children 타입들

1️⃣ JSX.Element

declare global {
    namespace JSX {
        interface Element extends React.ReactElement<any, any> { }

                // ...        
        }
}

 

JSX.Element 는 ReactElement 를 상속받는 인터페이스입니다.

이때 ReactElement 의 type 과 props 가 any 타입으로 정의되어있습니다.

다양한 라이브러리가 JSX 를 그들만의 방식으로 구현할 수 있기 때문에

React 는 전역 네임스페이스에 위와 같이 JSX 타입을 정의한 것입니다.

 

2️⃣ React.ReactElement

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
    type: T;
    props: P;
    key: Key | null;
}

 

React.createElement 함수를 호출하면 ReactElement 요소가 반환됩니다.

또한 React 의 함수형 컴포넌트의 반환 타입이기도 합니다.

해당 타입은 오직 JSX 요소만을 받도록 강제할 수 있기 때문에

만약 다음과 같이 원시값을 부여하면 타입 에러를 뱉어내게 됩니다.

 

원시타입은 ReactElement에 할당이 불가능하다

 

이 때문에 만약 원시값을 허용하지 않고 JSX 컴파일된 React 컴포넌트만 허용하고 싶은 경우

ReactElement 를 통해 children 타입을 지정하면 될 것 같습니다 😀

 

3️⃣ React.ReactChild (⚠️ deprecated)

type ReactChild = ReactElement | string | number;

 

React 18 부터 사용을 지양하는 타입입니다.

ReactElement 를 포함하여 string 과 number 타입을 포함하고있습니다.

React 와 직접적으로 연관이 없는 해당 타입을 인라인화하여

보다 명확한 타이핑을 하도록 하기 위한 의도로 생각됩니다.

 

4️⃣ React.ReactNode

type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;

 

가장 광범위하게 사용할 수 있는 React 컴포넌트타입입니다.

또한 클래스형 리액트 컴포넌트의 반환 타입이기도 합니다.

다음은 @types/react 에 정의되어있는 ReactNode 타입에 대한 명세입니다.

 

// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L431

class Component<P, S> {
        // ...

        setState<K extends keyof S>(
            state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
            callback?: () => void
        ): void;

        forceUpdate(callback?: () => void): void;

        render(): ReactNode; // <-- ✅ ReactNode!

        // ...
    }

 

string, number, null, undefined 등의 원시타입들과

ReactElement, ReactFragment 등의 타입을 모두 포함하고 있습니다.

ReactNodeArray 는 deprecated 되었기 때문에 만약 배열 형태가 필요하다면

ReactNode[] 형태로 타입을 정의합니다.

 

5️⃣ React.PropsWithChildren

type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };

 

React 16 부터 지원되기 시작한 타입입니다.

해당 타입을 통해 children 을 선택적으로 포함하는 컴포넌트의 타이핑을 간추릴 수 있습니다.

그런데 children 이 옵셔널하다보니 만약 컴포넌트의 children 이 필수값인 경우에는

적합하지 않은 타입일 수도 있겠다고 생각이 드네요 🤔

 

6️⃣ React.FC (🚨 consider not to use!)

type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    (props: P, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

 

이전에는 함수형 컴포넌트를 타이핑할 때 FC 제네릭 타입을 통해 하고는 했습니다.

React 17 에서는 props 가 PropsWithChildren 라서 children 가 ReactNode 타입을 가졌지만

React 18 부터는 props 에 대한 타입이 제네릭으로 바뀌면서 직접 지정해줘야합니다.

다만 React.FC 의 경우 암묵적으로 children 을 포함하는 등

장점보다 많은 여러가지 단점들 때문에 사용하는 것을 지양하고 있어

다른 타입들을 활용해서 컴포넌트에 대한 타입을 정의하는 것이 좋습니다.

 

📌 참고자료

Using React children prop with TypeScript

ReactNode, ReactChild, ReactElement 타입 비교

When to use JSX.Element vs ReactNode vs ReactElement?

DefinitelyTyped/types/react at master · DefinitelyTyped/DefinitelyTyped