[리액트 컴포넌트 타입 비교] ReactNode, ReactElement, JSX.Element

미리 내용을 요약하자면
타입의 범위는 ReactNode(포괄) > ReactElement > JSX.Element 로 나열해볼 수 있다.
클래스 및 children prop의 타입은 ReactNode로 반환되고 일반 함수형 컴포넌트에서는 ReactElement를 반환한다.


ReactElement와 JSX.Element

이 둘은 거의 유사한 대상으로 보면 된다.
함수형 컴포넌트의 리턴값에 해당된다. ReactElement|null

ReactElement

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

JSX.Element
전역에 정의 되어있고 React.ReactElement에서부터 상속받고 있다.
ReactElemet의 prop과 type이 any인 요소으로 생각하면 된다.

declare global {
	namespace JSX {
 		interface Element extends React.ReactElement<any, any> { }
   ...
  • jsx엘리먼트 ➡️ babel 트렌스파일링

    JSX는 바벨에 의해서 React.createElement(component, props, ...children) 함수로 트랜스파일된다. 첫번째 인자 component에는 ReactComponent, ReactFragment가 올 수 있으며 리액트 엘리먼트를 반환한다. jsx엘리먼트를 사용하는 이유는 번거롭게 React.createElement를 호출하지 않아도 된다는 점에서 사용이 권장된다. (*jsx를 사용하지 않고도 리액트를 사용할 수 있다_JSX없이 사용하는 React)

    • before

      function BasicButton({disabled, onClick, children}) {
        return <button disabled={disabled} onClick={onClick} style={{background:'red', margin:10}}>{children}</button>;
      }  
      
      function DisabledButton(){
        return (<Hello disabled onClick={()=>console.log('click disabled')}>비활성버튼</Hello>)
      }
    • after

      function BasicButton({
        disabled,
        onClick,
        children
      }) {
        return /*#__PURE__*/React.createElement("button", {
          disabled: disabled,
          onClick: onClick,
          style: {
            background: 'red',
            margin: 10
          }
        }, children);
      }
      
      function DisabledButton() {
        return /*#__PURE__*/React.createElement(Hello, {
          disabled: true,
          onClick: () => console.log('click disabled')
        }, "\uBE44\uD65C\uC131\uBC84\uD2BC");
      }

ReactNode

ReactNode는 모든 것을 지칭한다고 볼 수 있다.
string, number, boolean, null, undefined, ReactElement, ReactFragment, ReactPortal

클래스형 render함수의 리턴타입, PropsWithChildren의 children 타입으로 사용된다.
type PropsWithChildren<P> = P & { children?: ReactNode };

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;

interface ReactNodeArray extends ReadonlyArray<ReactNode> {}
type ReactFragment = {} | Iterable<ReactNode>;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

좋은 웹페이지 즐겨찾기