ReactNode vs ReactElement

처음 React + TypeScript를 사용할 때 가장 헷갈렸던 타입 중 하나가

ReactNode
ReactElement
JSX.Element

였다.

특히 이런 코드에서 자주 봤다.

function Layout({
  children,
}: {
  children: ReactNode;
}) {
  return <div>{children}</div>;
}

처음엔 단순히

"children 타입이구나"

정도로만 생각했다.

근데 실제로 React 렌더링 구조를 이해하기 시작하면,
이 타입들이 단순 TypeScript 유틸이 아니라 React가 무엇을 “렌더링 가능한 값”으로 보는지

를 설명하는 타입이라는 걸 알게 된다.

React에서 가장 중요한 개념 중 하나

React는 결국

"무엇을 화면에 렌더링할 것인가"

를 선언하는 라이브러리다.

예를 들어

<div>Hello</div>

이 JSX는 결국 React 내부에서 객체로 변환된다.

React.createElement('div', null, 'Hello');

즉 React는 JSX 자체를 렌더링하는 게 아니다.

JSX로 생성된 객체를 기반으로 UI를 만든다.

이 구조를 이해하면

ReactElement
ReactNode

차이도 자연스럽게 연결된다.

ReactElement

먼저 ReactElement부터 보면 이해가 쉽다.

const element = <div>Hello</div>;

이건 실제 DOM이 아니다.

브라우저에 아직 <div>가 생긴 것도 아니다.

실제로는 이런 객체에 가깝다.

{
  type: 'div',
  props: {
    children: 'Hello'
  },
  key: null
}

즉 ReactElement는 “어떤 UI를 만들 것인가”를 설명하는 객체

다.

실제 DOM이 아니라

Virtual DOM
Fiber tree

를 만들기 위한 설계도에 가깝다.

JSX는 결국 객체 생성 문법이다

이걸 이해하면 React가 훨씬 덜 마법처럼 보인다.

예를 들어

<MyComponent />

도 결국

React.createElement(MyComponent)

가 된다.

즉 JSX는

HTML이 아니라
ReactElement를 만드는 문법이다.

ReactElement에 포함되는 것

예를 들어:

<div />

<MyComponent />

둘 다 ReactElement다.

즉:

HTML tag 기반 element
React component 기반 element

둘 다 결국 ReactElement 객체로 변환된다.

ReactNode

반면 ReactNode는 훨씬 범위가 크다.

정의적으로 보면 대략 이런 느낌이다.

type ReactNode =
  | ReactElement
  | string
  | number
  | boolean
  | null
  | undefined
  | ReactNode[]
  | Iterable<ReactNode>;

핵심은 React가 렌더링할 수 있는 모든 값이라는 점이다.

왜 ReactNode가 필요할까

React는 JSX 안에서 굉장히 다양한 값을 허용한다.

예를 들어

<div>
  hello
  {123}
  {true}
  {null}
</div>

이게 전부 가능하다.

즉 React 입장에서는

문자열도 렌더링 가능
숫자도 렌더링 가능
배열도 가능
JSX도 가능

하다.

이걸 하나의 타입으로 묶은 게 ReactNode다.

ReactElement는 ReactNode의 일부다

이 관계가 중요하다.

ReactElement ⊂ ReactNode

즉:

모든 ReactElement는 ReactNode다.
하지만 모든 ReactNode가 ReactElement는 아니다.

예를 들어:

"hello"

이건 ReactNode지만 ReactElement는 아니다.

이것도 ReactNode지만 ReactElement는 아니다.

반면:

<div>Hello</div>

는 ReactElement이면서 ReactNode다.

실무에서 가장 많이 보는 곳 — children

실제로 ReactNode를 가장 많이 보는 곳은 children이다.

function Layout({
  children,
}: {
  children: ReactNode;
}) {
  return <div>{children}</div>;
}

왜 ReactElement가 아니라 ReactNode일까?

이유는 children에 정말 다양한 값이 올 수 있기 때문이다.

children은 JSX만 오는 게 아니다

예를 들어:

<Button>
  hello
</Button>

children은 string이다.

<Button>
  {123}
</Button>

number다.

<Button>
  {[<div />, <span />]}
</Button>

배열이다.

<Button>
  {condition && <div />}
</Button>

여기서 condition이 false면:

false 자체가 들어간다.

즉 children은 단순 ReactElement 하나로 표현할 수 없다.

그래서:

children: ReactNode

를 가장 많이 사용한다.

boolean은 왜 렌더링되지 않을까

이것도 처음엔 헷갈렸다.

<div>{false}</div>

화면에 아무것도 안 나온다.

이유는 React가:

boolean
null
undefined

를 “렌더링하지 않는 값”으로 처리하기 때문이다.

이 특성 때문에 이런 패턴이 가능하다.

{isOpen && <Modal />}

false면 아무것도 렌더링 안 한다.

false도 ReactNode지만,
렌더링 결과는 empty다.

ReactElement는 실제 DOM이 아니다

이 부분 굉장히 중요하다.

처음 React를 배우면

const element = <div />

를 DOM처럼 생각하기 쉽다.

근데 실제로는 그냥 객체다.

React는 이 객체를 기반으로:

Virtual DOM tree
Fiber tree

를 만들고,
이후 reconciliation을 거쳐 실제 DOM 업데이트를 계산한다.

즉 ReactElement는

“DOM 자체”가 아니라 “DOM을 만들기 위한 설명 객체”다.

JSX.Element는 또 뭘까

이것도 많이 헷갈린다.

실제로는 대부분 ReactElement와 거의 비슷하게 느껴진다.

function Component(): JSX.Element {
  return <div />;
}

보통 component return type에서 사용한다.

근데 children 타입으로는 잘 안 쓴다.

왜냐하면

children: JSX.Element

로 하면

<Button>
  hello
</Button>

같은 게 안 된다.

즉 JSX.Element는:

“JSX 결과 객체”

느낌이고,

ReactNode는

“렌더링 가능한 모든 값”

느낌이다.

ReactElement

JSX로 생성된 객체
UI를 설명하는 설계도

예:

<div />
<MyComponent />

ReactNode

React가 렌더링 가능한 모든 값

포함:

ReactElement
string
number
array
null
boolean

등.

그래서:

children
render prop
slot pattern

에서는 대부분 ReactNode를 사용한다.

ReactNode,ReactElement