React Hook Form의 handleSubmit으로 폼 제출 시 페이지 리렌더링 방지하기

 

폼 제출 시 페이지 리렌더링: 기본 동작 방지를 잊은 예시

// 잘못된 코드 예시

import React, { useState } from "react";

const ExampleForm = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  // onSubmit 함수, 기본 동작 방지 없음
  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    // e.preventDefault()가 없으므로 폼 제출 시 페이지 새로고침 발생
    console.log("폼이 제출되었습니다:", { email, password });
  };

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button type="submit">제출</button>
    </form>
  );
};

export default ExampleForm;

 

문제점

위 코드에서는 onSubmit 함수 안에 e.preventDefault()가 없기 때문에, 사용자가 버튼을 클릭하면 기본 폼 제출 동작이 발생하여 페이지가 리렌더링(새로고침)된다.

 

 

결과

폼 데이터는 콘솔에 출력되지 않거나 페이지 새로고침으로 인해 데이터가 사라진다.

 

 

해결 방법

페이지 새로고침을 방지하기 위해, onSubmit 함수 내에 e.preventDefault()를 추가하거나

const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault(); // 페이지 새로고침 방지
  console.log("폼이 제출되었습니다:", { email, password });
};

 

React Hook Form의 handleSubmit을 사용하는 방식으로 해결할 수 있다.

 

 

React Hook Form의 handleSubmit으로 폼 제출 시 페이지 리렌더링 방지하기

handleSubmit을 사용하면 기본적으로 폼의 제출 동작을 관리해 주기 때문에, <button> 요소를 클릭할 때 발생하는 기본 동작인 페이지 새로고침(리렌더링)을 방지할 수 있다.

 

 

React Hook Form에서 제공하는 handleSubmit 함수는 이벤트 처리를 자동으로 처리하여, e.preventDefault()를 명시적으로 호출할 필요가 없다.

 

 

기본 동작과 관련된 문제

 

일반적으로, <button type="submit">는 폼의 기본 제출 동작을 트리거한다.

이 기본 동작은 브라우저에서 폼을 제출하고 페이지를 새로고침하게 만든다.

다음과 같은 상황에서 페이지가 새로고침된다.

• <form> 태그 안에 있는 <button>이 type="submit"일 경우.
• 이벤트가 처리되지 않은 상태에서 폼이 제출될 경우.

 

 

기본 제출 동작이 방지되지 않으면, 페이지가 새로고침되면서 애플리케이션 상태가 초기화되고 페이지가 리렌더링 된다. 보통 이러한 동작은 원하지 않으므로, 기본적으로 e.preventDefault()를 사용해 페이지 리렌더링을 막는다.

 

 

handleSubmit의 역할

React Hook Form에서 handleSubmit은 폼 제출 시 기본 브라우저 동작을 방지하고, 폼 데이터를 수집한 후, 유효성 검사를 통과하면 지정된 onSubmit 함수를 호출해 준다.

 

 

즉, handleSubmit은 내부적으로 e.preventDefault()를 호출하여 기본 동작을 막는다. 이 덕분에 개발자가 직접 이벤트 객체를 처리할 필요가 없다.

 

 

작동 과정

1. <button>을 클릭하면 기본적으로 폼이 제출되면서 페이지가 새로고침되지만, React Hook Form의 handleSubmit을 사용하면 이 기본 동작이 방지된다.
   
   
2. handleSubmit은 자동으로 폼 데이터를 수집하고, 유효성 검사를 실행한 후, 유효한 경우에만 onSubmit 함수를 호출한다.
   
   
3. 따라서, 이벤트 객체(e)를 받지 않고도 페이지가 리렌더링 되지 않으며, 폼 제출이 처리된다.

 

// 코드 예시

import { useForm } from "react-hook-form";

type FormValues = {
  email: string;
  password: string;
};

const YourComponent = () => {
  const { register, handleSubmit, formState: { errors, isValid } } = useForm<FormValues>();

  const onSubmit = (data: FormValues) => {
    console.log("폼 데이터:", data);
    // 제출 처리 로직
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} type="email" placeholder="Email" />
      <input {...register("password")} type="password" placeholder="Password" />
      <button type="submit" disabled={!isValid}>
        제출
      </button>
    </form>
  );
};

 

 

요약

• handleSubmit은 기본 폼 제출 동작을 자동으로 방지하기 때문에, 직접 e.preventDefault()를 호출할 필요가 없다.
• React Hook Form을 사용하면 폼 제출 시 발생할 수 있는 불필요한 리렌더링을 막을 수 있으며, 폼 유효성 검사를 통과한 데이터만 onSubmit 함수로 전달된다.