● 이벤트 객체와 매개변수
이벤트 핸들러에 이벤트 객체와 추가 매개변수를 모두 전달해야 하는 경우에는 함수 참조 방식을 사용할 수 없습니다. 이런 경우에는 인라인 핸들러 방식을 사용해 이벤트 객체와 원하는 매개변수를 명시적으로 전달해야 합니다.
다음 코드는 onClick 이벤트 속성에 인라인 핸들러 방식으로 함수를 작성하고, 이벤트 객체 e와 문자열 'Hello'를 함께 전달합니다.
src/App.tsx
export default function App() {
const clickHandler = (
e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
msg: string
) => {
console.log(e);
alert(msg);
};
return (
<>
<button onClick={(e) => clickHandler(e, 'Hello')}>click</button>
</>
);
}