개요

React 컴포넌트의 타입을 결정할 때 ReactNode, JSX.Element 등의 여러 타입이 있다.

각 타입의 차이점을 이해하고, 상황에 맞게 타입을 정의하고자 글을 작성하였다.

React 컴포넌트 타입 종류

1. ReactElement
2. JSX.Element
3. ReactNode
4. ReactChild
5. ReactFragment
6. ReactPortal
7. ComponentType

<aside> 💡 이 외에도 더 많은 타입이 있지만, 주로 사용하는 타입에 대해서 우선 정리하려고 한다.

</aside>

ReactElement

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

const createElement: ReactElement = React.createElement('div', { className: 'name' }, 'React');
const jsx: ReactElement = <div className="name">React</div>;

ReactElement는 React.createElement를 호출하거나 JSX 문법을 사용해서 만든 객체의 인터페이스 이며, 이 객체는 type, props를 가지고 있다.

함수형 컴포넌트는 ReactElement를 반환하고, 클래스형 컴포넌트는 ReactNode를 반환한다.

JSX.Element