props란?

props란 부모컴포넌트에서 자식컴포넌트에게 넘겨주기위한 방법이다.

//APP.js
function APP () {
	const gift = [
		{과자:선칩, 용돈: 50000, 아이스크림: 쌍쌍바},
        	{과자:콘칩, 용돈: 60000, 아이스크림: 메로나},
        	{과자:치토스, 용돈: 70000, 아이스크림: 바밤바},
	]
	return <>
		<Son gift={gift[0].과자} gift={gift[0].용돈} gift={gift[0].아이스크림}/>
        	<Son gift={gift[1].과자} gift={gift[1].용돈} gift={gift[1].아이스크림}/>
        	<Son gift={gift[2].과자} gift={gift[2].용돈} gift={gift[2].아이스크림}/>
	</>
}

부모(상위) 컴포넌트인 APP컴포넌트에서 이런식으로 자식(하위)컴포넌트인 Son컴포넌트에 props를 전달하고

//Son.js
function Son (props) {
	return
    	<>
        	{props.과자}
            	{props.용돈}
            	{props.아이스크림}
        </>
}

이렇게 자식컴포넌트에서 받아 쓸 수 있다.

위와 같이 부모에서 자식에게 gift에 있는 값을 각각 설정해서 보내 줄 수있지만, 한번에 gift라는 배열을 보내어 쓸 수도 있다.

//APP.js
function APP () {
	const gift = [
		{과자:선칩, 용돈: 50000, 아이스크림: 쌍쌍바},
        	{과자:콘칩, 용돈: 60000, 아이스크림: 메로나},
        	{과자:치토스, 용돈: 70000, 아이스크림: 바밤바},
	]
	return <>
		<Son gift={gift[0]}/>
        	<Son gift={gift[1]}/>
        	<Son gift={gift[2]}/>
	</>
}

//Son.js
function Son (props) {
	return
    	<>
        	{props.gift.과자}
            	{props.gift.용돈}
            	{props.gift.아이스크림}
        </>
}

이런식으로 할 수 있다.

또한 자식 컴포넌트에서 프롭스를 객체 구조 분해 할당으로 받아서 쓸 수도 있다.

//Son.js
function Son ({gift}) {
	return
    	<>
        	{gift.과자}
            	{gift.용돈}
            	{gift.아이스크림}
        </>
}

이렇게 하면 된다.