props.children

Front-end React

2023-03-22

`props` vs. `props.children`

`props`

<MyCat food="churu"/> // -> props.food

props는 parent 에서 child 컴포넌트로, 원하는 데이터나 함수 등을 넘기기 위해 사용하는 수동 방식이다.

`props.children`

<MyCat food="churu">
  <div></div> // -> props.children
</MyCat>

parent component에서 작성한 해당 태그의 자식은 굳이 명시해주지 않더라도 props.children이란 이름으로 props 내부로 넘어가게 된다.

`props.children` 예제

/* Parent component */
import MyCat from "@/components/my-cat";
export default function MyCatPage() {
  return (
    <MyCat name="이비">
      <input type="text" />
    </MyCat>
  );
}

/* Child component */
interface IProps {
  name: string;
  children: JSX.Element;
}
export default function MyCat(props: IProps) {
  return (
    <>
      <div>ฅ^._.^ฅ</div>
      <div>{props.name}</div>
      <div>가장 좋아하는 음식 : {props.children}</div>
    </>
  );
}

props children 예제

위의 예제를 적용하면 parent에서 입력했던 <input/>태그가 props.children으로 불려와서 child 컴포넌트에서 렌더됨을 볼 수 있다.

`props.children`을 사용하는 경우

function MyApp({Component, pageProps}) {
  return(
    <Layout>
      <Component {...pageProps} /> // 각각의 페이지 컴포넌트
    </Layout>
  )
}

export default function Layout(props) {
  return(
    <>
      <Header/>
      <Banner/>
      <NavBar/>
      <Body>
        {props.children} // 각 페이지가 렌더된다
      </Body>
    </>
  )
}

위와 같이, 유동적인 컨텐츠를 담는 페이지 구조에서 사용하게 된다.

props vs. props.children

props