[리액트 컴포넌트 타입 비교] 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;
Author And Source
이 문제에 관하여([리액트 컴포넌트 타입 비교] ReactNode, ReactElement, JSX.Element), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@skawnkk/리액트-컴포넌트-타입-비교-ReactNode-ReactElement-JSX.Element-naz4oupj저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)