React입문 1주차(Props Children)

// src/App.js

import React from "react";

function User(props) {
  console.log(props)
  return <div>{props.name}</div>;
}

function App() {
  const name = "상위컴포넌트이름"
  return <User name={name}/>;
}
export default App;

---

Props Children

 

<User hello='안녕하세요'> 이렇게 props를 보내던 방식과는 조금 다르다

 

정보를 받는 방식은 기존과 동일합니다. 대신 그 이름이 children 으로 정해져 있다. 

// src/App.js

import React from "react";

function User(props) {
  console.log('props', props);
  return <div>{props.children}</div>;   // 2.react에서는 자동적으로 children props를 가지고 있다고 인식함
}

function App() {
  return <User>안녕하세요</User>; // 1. 열고 닫는 태그를 사용해서 정보를 자식 컴포넌트에 전달해주면
}

export default App;

> User 컴포넌트에서 props.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 About() {
  return (
    <Layout> 
      <div>여긴 About의 컨텐츠가 들어갑니다.</div>
    </Layout>
  );
}
export default About;

> 태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props

 

> 그러니까 미리 만들어둔 데이터를 일반적인 props처럼 부모 컴포넌트를 지정할 필요없이 import를 지정해서 children이라는 명목하에 동일하게 받아온다고 생각하면 되는 것 같음 

---