Props

• Props 는 리액트 컴포넌트에 전달되는 인수
• HTML 속성을 통해 컴포넌트에 전달
• 컴포넌트 인수를 Props 객체로 받음
• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법

Props의 기본 방식

function Card(props) {
	return (
		<div> 
			<h2>{props.title}</h2>
			<p>{props.content}</p>
		</div>
	);
}

// 사용
<Card title="공지사항" content="안녕하세요" />

Props 구조 분해

Props 구조 분해는 함수 매개변수에서 바로 Props의 속성들을 추출하는 방법

기본 구조

function Greeting({ name, age}) {
	return <h1>안녕하세요, {props.name}님! 나이는 {props.age}세입니다.</h1>;
}

<Greeting name="철수" age={25} />

원리

// 이코드를 
function User(props) {
	const name = props.name;
	const age = props.age;
	const email = props.email;
}

// 이렇게 한줄로
function User ({} name, age, email ) {
	// 바로 사용가능
}

Props childern

props.children은 컴포넌트 태그 사이에 있는 내용을 자동으로 받는 특별한 props이다

기본 구조

function Box (props) {
	return (
		<div classNam="Box">
			{props.children}
	);
}

// 사용
<Box>
	<p>이 내용이 childern입니다.</p>
</Box>