[React] React.ReactElement 와 React.ReactNode

React.ReactElement와 React.ReactNode은 React에서 사용되는 두 가지 다른 타입입니다.

1. React.ReactElement:
   • React.ReactElement는 React 컴포넌트의 인스턴스를 나타내는 타입입니다.
   • React 컴포넌트를 JSX로 작성할 때 생성되는 엘리먼트입니다.(jsx 요소만을 허용)
   • React.ReactElement는 컴포넌트의 타입, 속성(props), 자식 엘리먼트 등을 포함합니다.
   • 일반적으로 JSX를 사용하여 컴포넌트를 작성하면 React.ReactElement가 생성됩니다. (JSX.Element와 차이 없음)
   • 예: <MyComponent prop1={value1} prop2={value2} />
2. React.ReactNode:
   • React.ReactNode은 React 컴포넌트가 렌더링할 수 있는 모든 타입을 나타내는 타입입니다.
   • React.ReactNode은 React.ReactElement뿐만 아니라 문자열, 숫자, 배열, 조건부 렌더링을 위한 조건부 타입(예: null 또는 undefined), 포털(Portal) 등 다양한 타입을 포함합니다.
   • React.ReactNode은 컴포넌트의 자식 엘리먼트나 렌더링 결과로 반환되는 값의 타입을 나타냅니다.
   • React.ReactNode은 컴포넌트가 자식 엘리먼트를 가지는 경우, 그 자식 엘리먼트들의 타입을 지정하는 데 주로 사용됩니다.
   • 예: React.ReactNode 또는 React.ReactNode[]

요약하면, React.ReactElement는 React 컴포넌트의 인스턴스를 나타내는 타입이고, React.ReactNode은 React 컴포넌트가 렌더링할 수 있는 모든 타입을 포함하는 타입입니다. React.ReactElement는 컴포넌트의 인스턴스를 나타내는 반면, React.ReactNode은 컴포넌트의 자식 엘리먼트나 렌더링 결과로 반환되는 값의 타입을 나타냅니다.

ReactNode 타입은 클래스 컴포넌트의 render 함수가 기본적으로 리턴하는 타입이기도 함.

함수 컴포넌트는 ReactElement 인터페이스를 리턴

타입별 허용 범위 비교 : ReactNode > ReactElement