다음 코드에서는 <button> 요소에 clickHandler() 함수를 참조 형태로 전달할 때 이벤트 객체를 명시하지 않습니다. 하지만 해당 함수의 첫 번째 매개변수로 e를 선언해 자동으로 이벤트 객체가 전달됩니다.

src/App.tsx

export default function App() {

  const clickHandler = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    console.log(e);
  };

  return (
    <>

      <button onClick={clickHandler}>click</button>

    </>
  );
}

함수 참조 방식에서 이벤트 객체를 사용하려면 참조 함수에 타입을 명시해야 합니다. 그런데 이벤트 객체의 타입은 JSX 요소와 이벤트 종류에 따라 달라지므로 정확히 외우기 어렵습니다. 이럴 때는 타입 추론을 활용하면 됩니다.

TIP   타입 추론(type inference)이란 프로그래밍 언어에서 명시적으로 타입을 지정하지 않아도 컴파일러나 인터프리터가 변수나 표현식의 타입을 자동으로 유추하는 기능을 말합니다.