[React] 자식에서 부모로 데이터 넘겨주기

sujipark-fe·2024년 6월 27일

React

목록 보기
1/7
post-thumbnail

자식 컴포넌트의 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)}>
        </>
    )
}
profile
개발 너무 재밌다 재밌어❤️‍🔥

0개의 댓글