ReactNode

ReactNode 타입이란?
ReactNode는 React에서 사용할 수 있는 모든 렌더링 가능한 요소를 나타내는 타입입니다.
즉, JSX를 통해 화면에 표시될 수 있는 값들을 포함하는 타입입니다.

📌 ReactNode의 정의
ReactNode는 react 패키지에서 제공되며, React에서 렌더링할 수 있는 거의 모든 값이 포함됩니다.

import { ReactNode } from "react";

ReactNode에 포함되는 요소들:
JSX 요소 (React 컴포넌트 포함) →

문자열 → "Hello"
숫자 → 123
배열 → [, ]
null 및 undefined
boolean 값 (true 또는 false) → (true나 false는 렌더링되지 않음)

ReactNode 예제

import { ReactNode } from "react";

type Props = {
  children: ReactNode;
};

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

export default function App() {
  return (
    <Container>
      <h1>안녕하세요!</h1>
      <p>이것은 ReactNode 타입을 사용하는 예제입니다.</p>
    </Container>
  );
}

위 코드에서 children은 h1, p 태그를 포함할 수 있습니다.

❌ ReactNode에 포함되지 않는 것
일반적인 객체나 함수는 직접 렌더링할 수 없으므로 ReactNode에 포함되지 않습니다.

const obj = { key: "value" };  // ❌ ReactNode가 아님!
const func = () => {};         // ❌ ReactNode가 아님!

이런 값들은 JSX 내부에서 직접 사용하면 오류가 발생합니다.

✅ ReactNode vs ReactElement
ReactNode
React에서 렌더링될 수 있는 모든 값 (문자열, 숫자, 배열 포함)
JSX에서 {} 안에 넣을 수 있음
ReactElement
React.createElement()로 생성된 특정 React 컴포넌트 인스턴스
ReactNode의 부분집합

import { ReactElement, ReactNode } from "react";

const element: ReactElement = <div>Hello</div>;  // ✅ 가능
const node: ReactNode = "Hello";  // ✅ 가능 (문자열도 포함됨)

결론
ReactNode는 React에서 렌더링할 수 있는 모든 값을 의미하는 타입이며, children을 받을 때 가장 많이 사용됩니다! 🚀