
자식 컴포넌트의 button을 클릭하면 어떠한 데이터를 부모로 보내줘야 하는 상황이다.
button에 onClick 이벤트핸들러에 데이터를 담아 부모로 보내줄 수 있다.
예를 들어, 자식에서 desc 라는 값을 가져와야 하는 경우, 이렇게 작성할 수 있다.
// 부모 컴포넌트
const Parent = () => {
// 받아온 데이터를 처리할 함수
const onClickText = (desc) => {
console.log(desc);
}
return (
<>
// 자식 컴포넌트에서 desc 받아오기
<Child clickHandler={(desc) => onClickText(desc)} >
</>
)
}
// 자식 컴포넌트
const Child = (clickHandler) => {
const desc = '데이터 입니다'.
return (
<>
<button type="button" onClick={() => clickHandler(el.desc)}>
</>
)
}