함수가 실행을 위해 파라미터를 전달받듯,

JSX요소가 부모로부터 주입받은 값 또는 배열, 객체

// name, age 두 개의 props를 받도록 요구하는 컴포넌트
export default function NameLabel({ name, age }: {
	name: string,
	age: number,
}){

	return <span>{`저는 ${name}(${age})입니다.`}</span>;
}

// 호출부에서 속성으로 전달
<NameLabel name='김철수' age={25}></NameLabel>

함수형 컴포넌트에서 파라미터로 전달받고,

구조분해할당을 사용하여 이름을 지정할 수 있음

이때 이름이 children인 props는 특수하게 태그 사이의 내용물로 전달이 가능하며

JSX요소 및 문자열, 숫자 또는 null이어야 함

// children를 요구하도록 추가 (명시하지 않아도 React가 자동으로 포함하긴 함)
export default function NameLabel({ name, age, children }: {
	name: string,
	age: number,
	children: React.ReactNode,
}){

	// 이런 식으로 구성 가능, children을 어떻게 사용할진 개발자 마음
	return (
					<div>
						<span>{`저는 ${name}(${age})입니다.`}</span>
						{children}
					</div>
					);
}

// 호출부, children은 속성이 아니라 태그 사이에 끼워 전달
<NameLabel name='김철수' age = {25}>
	{여기에 children을 끼워 넣어서 전달}
</NameLabel> 

children을 props에 명시하지 않아도 React가 자동으로 포함해 줌

다만 TypeScript에서는 타입을 명시해야만 사용할 수 있기 때문에 props에 써야 함