React.ReactElement, JSX.Element, React.ReactNode

React.ReactElement

정의

ReactElement는 특정 타입의 React 엘리먼트, React.createElement 함수를 호출 하거나 JSX를 통해 반환되는 객체의 타입을 나타냄

주 용도

주로 하나의 React 컴포넌트 요소를 명시적으로 정의할 때 사용

import React from 'react';

const element: React.ReactElement = <div>Hello, World!</div>;

결론

React.ReactElement는 특정 컴포넌트를 구성하는 단일 React 엘리먼트를 나타내며, 보통 컴포넌트나 JSX 반환 타입으로 사용

JSX.Element

정의

JSX.Element는 React.ReactElement의 타입과 거의 유사하지만, 일반적으로 JSX를 사용한 요소 반환 타입을 나타낼 때 사용

주 용도

JSX를 사용하는 프로젝트에서 반환 타입으로 자주 사용되며, React.ReactElement와 거의 같다고 볼 수 있음. 그러나 명확히 JSX 문법을 사용하는 경우에 주로 쓰임.

const MyComponent = (): JSX.Element => {
    return <div>JSX Element Example</div>;
};