Type) JSX.Element, ReactNode, 그리고 ReactElement

JSX.Element, ReactNode, 그리고 ReactElement는 React에서 사용되는 타입(Type)들을 나타내는 용어들이다.

크게 ReactNode 안에 ReactChild와 JSX.Element가 포함된다고 한다.

JSX.Element:

JSX.Element은 React 컴포넌트에서 JSX 문법을 사용하여 생성된 요소(element)를 나타낸다.
예를 들어, <div>, <span>, <MyComponent />와 같은 JSX 문법으로 작성된 요소들은 JSX.Element이다.
JSX.Element은 React 요소를 나타내는 일종의 추상화된 타입이며, 실제로는 ReactElement<any, string | JSXElementConstructor>로 타입 정의되어 있다.

ReactNode:

ReactNode는 React에서 렌더링할 수 있는 모든 데이터 타입을 나타낸다.
예를 들어, string, number, boolean, null, undefined, ReactElement, Array, Fragment 등의 타입들이 모두 ReactNode이다.
ReactNode는 특정 요소가 아니라, 여러 종류의 값들을 하나의 타입으로 통합하여 나타내준다.

ReactElement:

ReactElement는 React 요소를 나타내는 타입이다.
JSX.Element은 ReactElement의 약칭이며, 둘은 동일한 의미를 가진다.
ReactElement는 특정 React 컴포넌트가 렌더링된 결과물을 나타내는 객체로, type, props, key, ref 등의 속성들을 가지고 있다.
예를 들어,