📚 Reference

• 참고 자료 1

📜 Chapter

children

React.ReactChild

React.ReactElement

React.createElement

React.ReactNode

• ReactNode
• React.ReactNode
• **ReactNode**는 **children**속성의 타입으로 가장 많이 사용하는 타입이다.

// ReactChild 타입에 string, number 타입이 포함되어 있다.
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;

• ReactNode타입은 jsx내에서 사용할 수 있는 모든 요소의 타입을 의미한다.
• 즉 string, null, undefined등을 포함하는 가장 넓은 범위를 갖는 타입이다.
• ReactNode 타입은 클래스 컴포넌트의 render 함수가 기본적으로 리턴하는 타입이다.
• 반면 함수 컴포넌트는 ReactElement 인터페이스를 리턴 한다.
• JSX 내부에서 렌더링 할 수 있는 모든 대상이다.

ReactNode가 포함하는 범위

• ReactNode는 다음과 같은 타입들을 모두 포함하는 유니온 타입이다.
  • JSX 요소: <div />, <MyComponent />
  • 문자열 및 숫자: "Hello", 123
  • 배열 또는 Fragment: [<li key="1">A</li>, <li key="2">B</li>]
  • Portals: createPortal로 생성된 요소
  • null, undefined, boolean: 아무것도 렌더링하지 않을 때 사용 (화면에는 나타나지 않음)