React 18의 "Property 'children' does not exist..." 이슈

함수 컴포넌트를 사용할 때 React.FC 라는 제네릭을 활용하면 children, displayName, defaultProps 등의 함수 컴포넌트가 갖는 기본 속성들에 대해 타입 지원을 받을 수 있습니다.

import React from "react";

export const Child: React.FC = ({children}) => {
  return <>{children}</>
}

아마 React.FC를 사용하는 가장 큰 이유도 chlidren을 갖는 컴포넌트의 타입을 지정하기 위해서일 텐데요, 하지만 React 18부터는 위 코드에서 Property 'children' does not exist on type... 이라는 오류가 출력됩니다.

 

그 이유는 children 프로퍼티가 React.FC에서 제외되었기 때문으로, React 18부터는 아래와 같이 명시적으로 children의 타입을 지정해주는 것으로 해결할 수 있습니다.

import React, { ReactNode } from "react";

type ChildProps = {
  children: ReactNode;
};

export const Child = ({ children }: ChildProps) => {
  return <>{children}</>;
};

🔎 제외된 이유에 대해서는 이 글 에서 더 확인해보실 수 있는데요, 주요 골자는 일반 함수 컴포넌트와 React.FC 타입의 일관된 동작을 위해서라고 합니다.

React.FC 조금 더 살펴보기

한번 @types/react 17 버전과 18 버전이 각각 React.FC를 정의한 내용을 살펴보겠습니다.

• @types/react 17에서 정의한 함수 컴포넌트

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

interface FunctionComponent<P = {}> {
    // props 매개변수의 타입 : PropsWithChildren<P>
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

• @types/react 18에서 정의한 함수 컴포넌트

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

interface FunctionComponent<P = {}> {
    // props 매개변수의 타입 : P
    (props: P, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

둘의 미묘한 차이가 보이시나요?

 

react 17까지는 함수 컴포넌트가 PropsWithChildren<P> 라는 제네릭으로 props를 갖도록 되어 있었지만, React 18부터는 PropsWithChildren이 아닌 단순 P 라는 타입의 props를 갖게 되었습니다.

 

따라서 리액트 18 버전부터는 React.FC를 사용해도 자동으로 children 타입에 대한 지원을 받을 수 없고, 명시적으로 해당 컴포넌트에 주어지는 Props 타입에 children과 그 타입을 정해줘야 합니다.