React 자식 Component에서 부모 Component로 데이터 전달하는 방법

React로 화면을 개발할 때 기능별로 컴포넌트를 쪼개다보니 자식 Component에서 부모 Component로 데이터를 전달해야하는 경우가 생겼습니다.

이럴 경우 부모 Component에서 자식 Component로 데이터를 전달할 때는 props를 통해 전달하듯이,

부모 Component에서 useState 훅(Hook)을 통해 전달받을 데이터를 저장할 변수를 선언하고 props로 setter를 전달하면 됩니다.

자식 Component에서는 부모로부터 전달받은 setter를 통해 전달할 데이터를 저장해주면 부모 Component에서 해당 데이터를 전달받을 수 있습니다!

간단한 예시는 아래와 같습니다.

[react 버전] 16.13.1

[참고] stackoverflow.com/questions/55726886/react-hook-send-data-from-child-to-parent-component