객체 데이터를 자식 컴포넌트에 전달했듯이 이벤트 핸들러 함수도 props를 통해 자식 컴포넌트에 전달할 수 있습니다. 예를 들어 버튼을 클릭했을 때 어떤 동작을 실행하고 싶다면 부모 컴포넌트에서 클릭 이벤트 핸들러 함수를 정의하고 자식 컴포넌트에 전달하면 됩니다.

src/App.tsx

import User from './components/User';
export default function App() {
  const userObj = {
    name: '철수',
    age: 20,
  };

  const clickHandler = () => { ----- ➊
    console.log('clicked');
  };
  return <User userObj={userObj} clickHandler={clickHandler} />; ----- ➋

}

➊ clickHandler()는 버튼 클릭 시 실행되는 함수입니다. 실행되면 콘솔에 ‘clicked’를 출력합니다.

➋ clickHandler() 함수를 clickHandler라는 속성으로 User 컴포넌트에 전달합니다.