Props Children

1. props의 주요 개념 중, children에 대해 설명할 수 있습니다.
2. children의 용도와 렌더링 방법에 대해 설명할 수 있습니다.

children이란?

컴포넌트에서 말하는 children은 무엇을 의미할까요?
자식 컴포넌트로 정보를 전달하는 또 다른 방법입니다. (=props)

children의 용도

Layout 컴포넌트를 만들 때 자주 사용
Layout 컴포넌트 안에는 header 라는 컴포넌트가 있고, header 아래에 {props.children} 를 통해서 props를 받아 렌더링 하고 있습니다.
즉, Layout 컴포넌트가 쓰여지는 모든 곳에서 <Layout>…</Layout> 안에 있는 정보를 받아서 가져올 수 있는 것이죠.

// src/About.js

import React from "react";
import Layout from "./components/Layout";

function App() {
  return (

    <Layout> 
      <div>여긴 App의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default App;

이 코드를 통해, Layout에 있는 header가 보여지게 되고, “여긴 App의 컨텐츠가 들어갑니다.” 라는 문장이 Layout의 props로 전달되는 것 입니다.
결과적으로 우리는 header 컴포넌트를 Layout 컴포넌트에서 한번만 작성하면 여러 페이지에서 모두 보여지게 할 수 있는 것 입니다.

실습

App.js

import React from "react";
import Layout from "Layout";

function App() {
  return (
    <Layout>
      <div>App 컴포넌트에서 보낸 값 입니다!</div>
    </Layout>
  );
}

export default App;

Layout.js

import React from "react";

function Layout(props) {
  return (
    <>
      <header
        style={{
          margin: "10px",
          border: "1px solid red",
        }}
      >
        항상 출력되는 머릿글 입니다.
      </header>
      {props.children}
    </>
  );
}

export default Layout;

function Layout() 의 괄호 안에 props를 넣지 않아 오류가 자꾸 떴었다.