📚 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 내부에서 렌더링 할 수 있는 모든 대상이다.

예시

const App = () => {
  return (
    <div className="App">
      <Wrapper>
        {/* 과연 children 요소의 타입은 무엇일까요? */}
        <div>Hello, world!</div>
      </Wrapper>
    </div>
  );
};

type WrapperProp = {
  // children: React.ReactChild;
  // children: React.ReactElement;
  // children: JSX.Element;
  // children: React.ReactChildren;
  // children: React.ReactNode;
    // ...으아아아!! ...
};

const Wrapper = ({ children }: WrapperProp) => {
  return (
    <div className="Wrapper">
      <div>{children}</div>
    </div>
  );
};

export default App;