react - 이벤트 핸들링 프롭으로 넘겨주기

events

export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

//인라인 정의
<button onClick={() => {
  alert('You clicked me!');
}}>

events함수 prop으로 넘겨주기

만약 button컴포넌트를 만들었다면 부모 컴포넌트에서 event를 주기는 어려울것이다.
이때 event함수를 자식컴포넌트의 prop으로 넘겨줘서 사용해야한다.

//부모 컴포넌트

export default function App() {

 const onPlayMovie=() => alert('Playing!')
 const onUploadImage() => alert('Uploading!')}
 
  return (
      <Button onClick={onPlayMovie}>
        Play Movie
      </Button>
      <Button onClick={onUploadImage}>
        Upload Image
      </Button>
  );
}


//button 컴포넌트
function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

https://ko.legacy.reactjs.org/docs/handling-events.html
https://react.dev/learn/responding-to-events