props란 부모 컴포넌트로부터 전달받은 데이털르 지니고 있는 객체를 의미 합니다.
부모 컴포넌트에서 tag에 속성을 주입하듯 자식 컴포넌트에 전달하고자 하는 데이터를 추가하면 props를 이용하여 모든 타입의 데이터와 함수까지도 전달할 수 있습니다.

1. Props ?

• props란 컴포넌트의 속성값을 의미합니다.
• 더 정확히는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체 입니다.
• props를 이용하면 전달하고자 하는 어떤 값이든 (변수, 함수, state값, event Handler 등) 모두 자식 컴포넌트에 전달할 수 있습니다.

2. props 사용방법

• props는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체라고 했었습니다.
• 그럼 이 props라는 건 언제 필요한걸까요? 그걸 지금부터 알아봅시다.

2-1. 부모 컴포넌트에서의 데이터 전달

import React from 'react';

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

  return (
		<>
	    <h1>부모 컴포넌트입니다.</h1>
			<p>{animal}</p>
		</>
  );
};

export default Parent;

• 지금 위의 예시에서는 하나의 컴포넌트가 '호랑이' 라는 문자열을 animal 이라는 변수에 담아 관리하는 것을 볼 수 있습니다.

• 이렇게 변수 안에 담아두면 animal 이라는 변수를 사용해서 <p>{animal}</p> 과 같이 사용해서 화면에 표현할 수 있습니다.

  그런데 여기서 컴포넌트가 위의 parent 라는 컴포넌트 말고도 Child 라는 컴포넌트가 하나 더 있다고 가정하고 화면에 똑같이 Child 컴포넌트에도 '호랑이' 라는 문자열을 화면에 표시하려면 어떻게 해야 할까요?

• 물론 제일 간편한 방법은 Child 컴포넌트에 똑같이 데이터를 직접 선언하고 표현하는 방법을 생각하셨을겁니다.

• 하지만 부모 컴포넌트에서 이미 선언한 부분과 중복이 되기 때문에 비효율적이라고도 생각할 수 있을 것 같습니다.

• 자 그럼 이런 비효율적인 부분을 해결하기 위해 props를 사용해봅시다.

import React from 'react';
import Child from './Child';

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

  return (
		<>
	    <h1>부모 컴포넌트입니다.</h1>
			<p>{animal}</p>
			<Child pet={animal} englishName='tiger' /> // 추가된 코드
		</>
  );
};

export default Parent;

• 자 위의 코드를 한번 봅시다. 전의 코드와 달라진 점이 뭐가 있나요?
• 네. import Child from './Child'; 이 것과 <Child pet={animal} englishName='tiger' /> 이런 코드가 추가됬네요.
• 자 그럼 순서에 맞게 한번 진행해보도록 합시다.

2-1-1. 부모 컴포넌트에서 자식 컴포넌트로...

1. 일단 우리가 props를 사용하기 위해서는 먼저 Child 컴포넌트를 만들고 import를 합니다.
   EX) import Child from './Child';
2. 그리고 <Child /> 컴포넌트를 return 문 내에 넣어줍니다.
   EX) <Child />
3. 그럼 우리가 여기서 우리는 어떤 데이터를 자식 컴포넌트로 보낼 것인가를 생각해야 합니다.
4. 위의 예시에서 부모 컴포넌트에는 이미 선언되어있고, 자식 컴포넌트에서도 필요한 데이터는 animal 이라는 변수 입니다.
5. 내가 자식 컴포넌트로 보내주고자 하는 데이터가 파악되었다면 tag에 속성을 주입하듯 pet={animal} 과 같이 자식 컴포넌트로 속성값을 추가해줍니다.

   pet={animal}
   pet = 자식 컴포넌트에서 데이터를 받을 때 사용되는 인식표

• '호랑이' 라는 데이터가 animal 이라는 변수에 담겨있듯 부모 컴포넌트에서 선언된 animal이라는 변수를 자식 컴포넌트에 넘겨줄 때 pet이라는 그릇에 담아 보내주는 것 입니다.

2-2. 자식 컴포넌트에서의 전달 받은 데이터 적용

• 지금까지는 자식 컴포넌트에서 재사용할 수 있는 데이터가 있기에, 부모 컴포넌트인 Parent는 pet 이라는 그릇에 변수를 담아 보내주었습니다.
• 그럼 이젠 자식 컴포넌트에서는 어떻게 props를 사용해서 데이터를 받아올 수 있는 것인지 알아봅시다.

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

import React from 'react';

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

  return (
		<>
	    <h2>자식 컴포넌트입니다.</h2>
			<p>{props.pet}</p>            // 호랑이
			<p>{props.englishName}</p>    // tiger
		</>
  );
};

export default Child;

• 함수에서 인자를 받아서 사용하듯이, 함수 컴포넌트 또한 const Child = (매개변수) => {} 와 같이 부모 컴포넌트에서 보내준 데이터를 받아서 사용할 수 있습니다.
• 함수와 마찬가지로 함수 컴포넌트의 매개변수의 이름을 마음대로 지을 수는 있지만, 부모 컴포넌트로부터 받은 props를 표현한다는 것을 명시적으로 나타내기 위해 const Child = (props) => {} 라고 매개변수 이름을 짓는 것이 컨밴션 입니다.
• 이제 받을 준비는 되었으니, 사용하기만 하면 됩니다.
  그 전에 보다 정확한 사용을 위해서 console.log(props) 를 통해서 값이 어떻게 넘어오는지 확인해보면 더 확실하게 알 수 있습니다.
• 자 이제 부모 컴포넌트에서 보내준 데이터와 값이 어떤 것인지 알 수 있게 되었습니다. 그럼 이 값을 어떻게 적용시키면 될까요?
• 우리가 이미 잘 알고 있는 객체의 접근 방법을 이용해서 보여주고자 하는 곳에 사용하면 됩니다.
  EX) (props.pet , props['englishName'])

2-3. 어? 그럼 함수는 어떻게 보내고 적용시키죠?

• 자, 이것도 예제로 한번 알아봅시다.

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

import React from 'react';
import Child from './Child';

const Parent = () => {
	const testConsole = () => {
		console.log('테스트 입니다.');
	};

  return (
		<>
			<h1>부모 컴포넌트입니다.</h1>
			<button onClick={testConsole}>클릭</button>
			<Child test={testConsole} />
		</>
  );
};

export default Parent;

• 지금 부모 컴포넌트에 testConsole 이라는 함수를 선언했습니다. 그리고 이 함수가 버튼을 클릭할 때마다 실행될 수 있도록 클릭 이벤트 핸들러에 걸어주었습니다.
• 그럼 이제 우린 매번 버튼을 클릭할 때마다 console.log 에서도 문자열이 정상적으로 출력되는지 확인할 수 있으면 되겠네요.
• 그럼 함수를 자식 컴포넌트에서도 사용해야 하는 상황이라면 어떻게 하면 될까요?
• 이 전처럼 변수를 넘겨줄 때와 크게 달라지는 것은 없습니다. 부모 컴포넌트에서 전달하고자 하는 testConsole 이라는 함수를 어떤 이름으로 넘겨줄지만 정해주면 됩니다.
  EX ) test={testConsole}

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

import React from 'react';

const Child = (props) => {
	console.log(props);       // {test: () => {console.log('테스트 입니다.')}}

  return (
		<>
			<h2>자식 컴포넌트입니다.</h2>
	    <button onClick={props.test}>클릭</button>
		</>
  );
};

export default Child;

• 부모 컴포넌트에서 전달하고자 하는 함수를 test 라는 그릇에 담아 전달했습니다.
• 변수로 props를 받는 예제와 동일합니다. 다만 button 태그에 클릭 이벤트 핸들러를 걸어주었고, 버튼을 클릭할 때마다 실행되는 함수를 부모로부터 받은 test 함수로 정의해주었습니다.
• 결국에는 실제로 button 태그가 클릭될 때마다 실행이 되는 함수는 부모 컴포넌트에 있는 testConsole 이라는 함수가 되는 것 입니다.