How to Pass a Component as a Prop in React

React의 props 모델은 매우 강력합니다. 가장 유용한 기능 중 하나는 컴포넌트를 prop으로 전달할 수 있는 기능입니다. 이를 통해 컴포저블 UI를 만들 수 있어 컴포넌트의 재사용성을 높일 수 있습니다.

문제는 이 기능을 올바르게 타입 지정하기 어려울 수 있다는 것입니다. 이 문제를 해결해 봅시다.

JSX를 prop으로 전달하기

컴포넌트를 prop으로 전달하는 가장 유연한 방법 중 하나는 컴포넌트가 JSX를 수신하도록 하는 것입니다. 아래 예시를 살펴보겠습니다.

interface LayoutProps {
  nav: React.ReactNode;
  children: React.ReactNode;
}
 
const Layout = (props: LayoutProps) => {
  return (
    <>
      <nav>{props.nav}</nav>
      <main>{props.children}</main>
    </>
  );
};
 
<Layout nav={<h1>My Site</h1>}>
  <div>Hello!</div>
</Layout>;

여기서 <h1>My Site</h1> 을 nav prop으로, <div>hello!</div> 를 children prop으로 전달합니다.

prop을 유효한 JSX를 허용하는 타입은 React.ReactNode 로 타입지정합니다. React.ReactElement 나 JSX.Element 를 사용하고 있지 않다는 점에 유의하세요. 이 글에서 그 이유를 설명합니다.

컴포넌트를 prop으로 전달하기

두 번째 방법은 JSX를 prop으로 전달하는 대신 전체 컴포넌트를 prop으로 전달하는 것입니다.