[React] Props

Props의 특징

• 컴포넌트의 속성을 의미한다.
• 부모 컴포넌트로부터 전달받은 값이다. (단방향 데이터 흐름을 갖는다.)
• 객체형태이다.
• 읽기 전용이다. (props는 수정할 수 없다.)

props를 사용하는 방법

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

function Parent() {
	return (
		<div className="parent">
			<h1>Parent Title</h1>
			{/* 하위 컴포넌트에 전달하고자 하는 값("Child Title")과 속성(text) 정의 */}
			<Child text={"Child Title"}/>
		</div>
	);
};

{/* props를 이용하여 정의된 값("Child Title")과 속성(text) 전달 */}
function Child(props) {
	return (
		<div className="child">
			{/* 전달받은 props를 렌더링 */}
			<h2>{props.text}</h2>
		</div>
	);
};

props를 전달하는 또 다른 방법

function Parent() {
	return (
		<div className="parent">
			<h1>Parent Title</h1>
			{/* 여는 태그와 닫는 태그 사이에 value를 넣어 정의 */}
			<Child>Child Title</Child>
		</div>
	);
};

{/* props를 통해 값을 전달 */}
function Child(props) {
	return (
		<div className="child">
			{/* props.children을 통해 렌더링 */}
			<h2>{props.children}</h2>
		</div>
	);
};