ReactNode란?

ReactNode는 React에서 렌더링할 수 있는 모든 요소의 타입을 의미합니다.

React에서 반환할 수 있는 모든 JSX 요소, 문자열, 숫자, 배열, null, undefined, boolean 등을 포함하는 최상위 타입이라고 보면 됩니다.

ReactNode의 정의

import { ReactNode } from "react";

ReactNode는 다음과 같이 정의됩니다:

type ReactNode =
  | ReactElement // JSX 요소 (컴포넌트)
  | string       // 문자열
  | number       // 숫자
  | boolean      // true, false (렌더링되지 않음)
  | null         // 렌더링되지 않음
  | undefined    // 렌더링되지 않음
  | ReactNode[]  // 배열 (여러 개의 ReactNode를 포함 가능)

즉, React에서 렌더링할 수 있는 모든 값을 나타냅니다.

ReactNode 사용 예제

🔹 children을 받는 컴포넌트에서 사용

컴포넌트에서 children을 받을 때 ReactNode를 사용하면, JSX 요소뿐만 아니라 문자열, 숫자 등도 허용할 수 있습니다.

import { ReactNode } from "react";

interface CardProps {
  children: ReactNode; // 🔥 JSX, 문자열, 숫자 등 모든 React 요소 가능
}

const Card = ({ children }: CardProps) => {
  return <div className="card">{children}</div>;
};

export default Card;

사용 예시

<Card>안녕하세요!</Card>  // 문자열 허용
<Card><h1>타이틀</h1></Card>  // JSX 허용
<Card>{42}</Card>  // 숫자 허용
<Card>{null}</Card>  // null 허용 (렌더링되지 않음)
<Card>{["React", "TypeScript"]}</Card>  // 배열 허용

ReactElement와의 차이

💡 ReactElement는 오직 JSX 요소만 허용하지만,
💡 ReactNode는 문자열, 숫자, null, undefined, 배열 등도 허용합니다.

 

               타입                     JSX                     요소          문자열           숫자       null        undefined      배열

ReactNode	✅	✅	✅	✅	✅	✅
ReactElement	✅	❌	❌	❌	❌	❌

 

예제:

import { ReactElement, ReactNode } from "react";

const element1: ReactElement = <h1>Hello</h1>; // ✅ JSX 요소 가능
const element2: ReactNode = "Hello"; // ✅ ReactNode 가능
const element3: ReactNode = 42; // ✅ 숫자 가능
const element4: ReactNode = null; // ✅ null 가능
const element5: ReactNode = [<h1>One</h1>, <h2>Two</h2>]; // ✅ 배열 가능

 

결론:

• ReactNode → JSX 요소 + 문자열 + 숫자 + 배열 등 모두 포함합니다.
• ReactElement → 오직 JSX 요소만 포함합니다.

ReactNode를 사용하는 상황

• children을 받는 컴포넌트 → children이 JSX, 문자열, 숫자 등일 수 있으므로 ReactNode 사용합니다.
• 동적인 UI 렌더링 → 특정 조건에서 null, undefined, boolean을 반환할 수도 있기 때문에 ReactNode가 필요합니다.

ReactNode를 활용한 실전 예제

1. children을 받는 Container 컴포넌트

import { ReactNode } from "react";

interface ContainerProps {
  children: ReactNode;
}

const Container = ({ children }: ContainerProps) => {
  return <div className="container">{children}</div>;
};

export default Container;

사용 예시:

<Container>
  <h1>Hello, ReactNode!</h1>
</Container>
<Container>ReactNode는 문자열도 가능!</Container>
<Container>{42}</Container>  // 숫자도 가능

2. 조건부 렌더링 시 ReactNode 사용

const Greeting = ({ isLoggedIn }: { isLoggedIn: boolean }): ReactNode => {
  return isLoggedIn ? <h1>Welcome back!</h1> : "로그인이 필요합니다.";
};

ReactNode를 반환하면 JSX 요소뿐만 아니라 문자열도 반환 가능합니다.

정리

✔ ReactNode는 React에서 렌더링할 수 있는 모든 요소를 포함하는 타입
✔ children을 받을 때 ReactNode를 사용하면 JSX, 문자열, 숫자 등 다양한 값을 받을 수 있음
✔ ReactElement는 오직 JSX 요소만 가능, ReactNode는 더 유연하게 사용 가능
✔ 조건부 렌더링, children props, 동적 UI에서 유용하게 사용됨