Children props(props.children)

props.children

React에서, props.children이라는 놈이 존재한다.

const element = <Title>안녕들하쇼</Title>

<Title>과 </Title> 사이에 들어가는 내용물을 Children props라고 한다.
이는 props.children으로 접근할 수 있다.

import React from "react"

function Title(props) {
	return <h1>{props.children}</h1>
}

여기서의 props.children은 문자열 "안녕들하쇼"가 된다.

하지만 문자열 외의 다른 무언가(React Components, React Elements 등)가 들어올 수도 있다. 예를 들어,

import React from "react"

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

const element = <Navbar>
      	<Title>안녕들하쇼</Title>
		<h1>잘가쇼</h1>
		<h2>또보쇼</h2>
      </Navbar>

이러한 경우에는 props.children에는 3가지 요소를 담은 배열(array) 이 담기게 된다.

• <Title>안녕들하쇼</Title>
• <h1>잘가쇼</h1>
• <h2>또보쇼</h2>

Recap

• props.children은 오픈태그 클로징태그 사이의 내용물을 가리킨다
• props.children은 하나의 아이템일수도 배열일수도 있다.
• 그 내용물은 별별게 다 될 수 있다(단순 문자열부터 React Component 등)