[React] 리액트 학습하기 - props.children

import Title from "./Title";

function App() {
	return (
		<>
			<Title color={"red"}>Hello World</Title>
			<Title color={"pink"}>
				<span>React Programing</span>
			</Title>
		</>
	);
}

export default App;

두 개의 Title 중 아래 Title을 <span>으로 감싸게 되면, 컴포넌트의 children이 된다. 저 children을 props로 전달하는 방법을 알아보자.

/*
function Title(props) {
	console.log(props);
	return (
		<h1 style={{ color: props.color }}>{props.children}</h1>
	);
}
*/
function Title({ color, children }) {
	return <h1 style={{ color: color }}>{children}</h1>;
}

export default Title;

방법이 두가지가 있다.
직접 props를 인수로 넣어 일일이 value값 앞에 props.을 붙여 데이터를 전달하는 방법과 간단하게 key를 인수에 다 넣고 그대로 value값만 넣는 방법.

그리고 children을 props로 받으려면 <span>자체가 children이므로
{children}이라고 적어주면 된다.

*children 속성을 사용하는 이유 : 어떤 컴포넌트에 전달할 데이터의 양이 많을 때 사용
ex) 각 서브페이지별 컨텐츠 (레이아웃을 동일하게 쓰고, 컨텐츠만 달라질 경우 props.children으로 전달하면 모든 서브페이지가 하나의 레이아웃 컴포넌트 구조를 공유)