ReactNode

ReactNode란? 타입 시스템에서 사용되는 타입이다. Typescript에서 React 컴포넌트를 렌더링할 수 있는 모든 종류의 자식 요소를 나타내는 타입으로

JSX 요소, 문자열, 숫자, 배열, Fragment 등 모든 종류의 ReactNode를 포함.

하는 특징을 가지고 있다.

예시

import { ReactNode } from 'react';

interface MyComponentProps {
  children: ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  return <div>{children}</div>;
}

...

<MyComponent>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</MyComponent>

예시와 같이 사용된다. MyComponent는 children이라는 속성을 받아들이고 있고, 타입은 ReactNode다. MyComponent를 사용할 때 다양한 종류의 자식 요소를 전달할 수 있게 해준다.

정리하기

ReactNode는 타입라고 생각하면 쉽다. 어렵게 생각하지 말자. ReactNode는 Typescript에서 타입을 정의할 때 사용하는 타입이다.