자식 컴포넌트에서 부모 컴포넌트로 값 전달하기

부모 컴포넌트에서 자식 컴포넌트로 전달하는건 간단하다.

<div>
  <Child name={nameList}></Child>
</div>

//Child 컴포넌트 내부에서 props.name 으로 받을 수 있다.

그럼 반대로 자식 컴포넌트에서 부모 컴포넌트로 전달하는 것은 어떻게 할까?

• 준비물: useState()
• 부모 컴포넌트에서 자식 컴포넌트로 props에다가 state 변경 함수를 전달한다. 자식 컴포넌트에는 props로 전달받은 함수에다 부모 컴포넌트에 전달할 값을 전달한다.

const [num, setNum] = useState('1');
<Parent>
  <Child childNum={(n) => setNum(n)}></Child>
</Parent>

//...Child 컴포넌트에서는...

function Child(props) {
	const [age, setAge] = useState(5);
	function sendData() {
		props.setNum(age);
	}
	return (
		<button onClick={sendData}>Click!</button>
	)
}