리액트 : Props

Props란?

컴포넌트의 속성값을 의미한다. 즉 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다. 모든 타입의 데이터와 함수까지도 props로 전달할 수 있다.

부모 컴포넌트에서의 데이터 전달

// Parent.js(부모 컴포넌트)

const Parent = () => {
	const animal = '호랑이';

  return (
		<>
			<Child pet={animal} englishName='tiger' />
		</>
  );
};

export default Parent;

자식 컴포넌트에서의 데이터 전달

// Child.js(자식 컴포넌트)

const Child = (props) => {
	console.log(props);          // {pet: '호랑이', englishName: 'tiger'}

  return (
		<>
			<p>{props.pet}</p>            // 호랑이
			<p>{props.englishName}</p>    // tiger
		</>
  );
};

export default Child;