React에서 onClick, onChange, onSubmit 같은 이벤트는 DOM 이벤트와 관련 있어.

TypeScript를 쓰면 정확한 이벤트 객체 타입을 지정해서 안전하게 접근할 수 있어.

📘 예제 26: MouseEvent, ChangeEvent 타입

import { ChangeEvent, MouseEvent, useState } from 'react';

const EventExample = () => {
  const [value, setValue] = useState('');

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
    alert('클릭됨!');
  };

  return (
    <>
      <input type="text" onChange={handleChange} />
      <button onClick={handleClick}>클릭</button>
    </>
  );
};

✅ ChangeEvent<HTMLInputElement>, MouseEvent<HTMLButtonElement>처럼 이벤트 타입과 HTML 요소를 함께 지정하는 게 중요해.

📘 예제 27: onClick과 onChange 핸들러 정의

type Props = {
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

const InputButton = ({ onClick, onChange }: Props) => {
  return (
    <>
      <input onChange={onChange} />
      <button onClick={onClick}>전송</button>
    </>
  );
};

✅ 컴포넌트로 핸들러를 전달할 때도 정확한 이벤트 타입을 함께 전달해줘야 안전하게 쓸 수 있어.

📘 예제 28: Form 이벤트 처리

const FormSubmit = () => {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault(); // 새로고침 방지
    alert('폼 전송됨');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">제출</button>
    </form>
  );
};

✅ FormEvent<HTMLFormElement>는 <form> 요소에 대한 이벤트 타입이야.

e.preventDefault()를 자주 쓰므로 반드시 e 타입을 정확히 지정해줘야 해.

📘 예제 29: 커스텀 이벤트 핸들러 타입

type ToggleProps = {
  onToggle: (checked: boolean) => void;
};

const Toggle = ({ onToggle }: ToggleProps) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onToggle(e.target.checked); // 체크 여부만 전달
  };

  return <input type="checkbox" onChange={handleChange} />;
};

✅ onToggle: (checked: boolean)처럼 커스텀 핸들러를 정의하고 내부에서 추출한 값을 넘겨주는 방식은 매우 일반적이야.