src/App.tsx

export default function App() {
  return (
    <form -------------------- ➊
      onSubmit={(e) => { ----- ➋
        e.preventDefault();
      }}
    >
      <input type='text' name='email' />
      <input type='password' />
      <button type='submit'>전송</button> ----- ➌
    </form>
  );
}

➊ <form> 요소는 사용자가 입력한 데이터를 서버로 제출하는 기능을 기본으로 수행하고, 전송 후 자동으로 페이지를 새로 고침합니다.

➋ onSubmit은 폼이 제출될 때 자동으로 실행하는 이벤트 핸들러입니다. 이벤트 핸들러에서 e.preventDefault()가 호출되어 페이지 새로 고침을 막습니다. 단, preventDefault()는 폼 제출 시 기본 동작을 취소할 뿐, 버튼을 클릭하는 동작 자체는 막지 않습니다.

➌ [전송] 버튼을 클릭하면 <form>이 제출되는 submit 이벤트를 발생시킵니다.