[React] children props

[children props] 

childeren props 를 생성하려면, 

import React from "react";

function App() {
  return <User children={"안녕하세요"} />;
}

function User(props) {
  return <div>{props.children}</div>;
}
export default App;

이처럼 부모 컴포넌트인 App 에 <User children={'안녕하세요'} /> 의 형태로 작성해야하나,

 

아래와 같이 닫고 여는 태그를 작성하여 생성할 수도 있음.

 

import React from "react";

function App() {
  return <User>안녕하세요</User>;
}

function User(props) {
  return <div>{props.children}</div>;
}
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;

위와 같이 작성한 후 export

 

이후 App.js 에서 이 파일을 import 한 후,

import React from "react";
import Layout from "Layout";
function App() {
  return (
    <Layout>
      <div>App 컴포넌트에서 보낸 값입니다.</div>
    </Layout>
  );
}

export default App;

<Layout></Layout> 를 위와 같이 작성하면 Layout 의 children props 는 <div> 태그 안의 값을 전달하게 되고, 위에 있던 Layout.js 에서는 props 로 그 값을 받아 <header> 태그 밑에 작성됨.