ReactNode, ReactElement, ReactChild

1. ReactNode

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

• ReactNode 타입은 jsx 내에서 사용할 수 있는 모든 요소의 타입을 의미한다.

• 클래스 컴포넌트가 리턴하는 값은 기본적으로 ReactNode 타입이다.

• 함수 컴포넌트가 리턴하는 값은 기본적으로 ReactElement 인터페이스다.

2. ReactElement

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

• ReactElement는 createElement 함수를 통해 생성된 객체(컴포넌트)의 타입이다.

• 원시 타입을 허용하지 않고 완성된 jsx 요소만을 허용한다.

• JSX.Element와 ReactElement는 완전히 동일하다.

3. ReactChild

type ReactChild = ReactElement | ReactText;

• ReactNode의 타입을 적절히 내로잉(narrowing)한 타입이다.

• 리액트 요소 객체(컴포넌트) + 원시 타입까지 허용한다.

타입별 허용 범위

참고 자료