리액트 입문(Props Children)

children이란?

자식 컴포넌트로 정보를 전달하는 또 다른 방법이다. childern도 props라고 생각하면 된다. 

 

// src/App.js

import React from "react";

function User() {
  return <div></div>;
}

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

children으로 props를 보내는 방식은 위와 같다. <User>안녕하세요</User> 형태로 보내고 있는데 <User hello='안녕하세요'> 이렇게 props를 보내던 방식과는 조금 다르다. 

 

 

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

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

정보를 받는 방식은 기존과 동일하나 이름이 children으로 고정되어 있다. 위 코드와 같이 부모 컴포넌트로 부터 받은 props를 console을 찍어보면 

이와 같이 나오는 모습을 볼 수 있다. 

 

import React from 'react'
import Layout from 'Layout'


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

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

export default App

따라서 위 코드를 실행하면 

부모 컴포넌트로 부터 받은 props를 웹페이지에 정상적으로 렌더링함을 알 수 있다. 

---

children의 용도

 

Layout 컴포넌트를 만들 때 자주 사용한다. 

import React from 'react'
import Layout from 'Layout'

function App() {
  return <Layout>여긴 App의 컨텐츠가 들어갑니다.</Layout>;
}

export default App

Layout.js라는 파일을 만들었고, App.js 파일 내에서 import 시켰다. <Layout>여긴 App의 컨텐츠가 들어갑니다.</Layout>이 children으로 Layout 파일 내의 Layout 컴포넌트로 데이터가 전달된다. 

 

import React from 'react'

function Layout(props) {
    return (
        <>
        <header
            style={{ margin: "10px", border: "1px solid red" }}
        >이건 모든 페이지에서 보이는 헤더입니다.
        </header>

        <div>{props.children}</div>
        </>
    )
}

export default Layout

Layout 파일 내에 있는 Layout 컴포넌트에서 props를 받아 {props.children} 형태로 웹에 렌더링하게 된다.