wam
w__am 개발노트
wam
  • 분류 전체보기 (165)
    • CS 지식 (10)
      • 자료구조 (0)
      • 알고리즘 (0)
      • 컴퓨터 구조 (0)
      • 운영체제 (0)
      • 네트워크 (7)
      • 데이터베이스 (0)
      • 디자인 패턴 (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • 클라우드 서비스 (3)
      • 네트워크 (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • 유용한 사이트 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 🐱 Github

인기 글

태그

  • 오프-프레미스(off-premise) 방식
  • 원형적인 움직임
  • threejs 개발 할 때 도움을 줄 수 있는 유틸리티
  • 함수 선언문
  • reactive variables
  • math.sin()
  • three.js 구성 요소
  • mapped types
  • Interface
  • 초기 환경설정
  • getdelta()
  • axeshelper
  • joi 에러
  • 함수의 범위
  • isabstract
  • 함수 리터럴
  • 디자인 패턴
  • 스코프
  • type-graphql
  • 렌더링 성능 최적화
  • 함수 표현식
  • react 성능 최적화
  • gridhelper
  • Decorators
  • e.preventdefault()
  • 데이터 포맷
  • getelapsedtime()
  • 삼각함수
  • math.cos()
  • API

최근 글

관리자

글쓰기 / 스킨편집 / 관리자페이지
hELLO · Designed By 정상우.
wam

w__am 개발노트

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

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

2024. 9. 26. 00:52

 

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

// 잘못된 코드 예시

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 함수로 전달된다.

 

 

 

저작자표시 변경금지 (새창열림)

'Frontend > React' 카테고리의 다른 글

[Rect Hook Form] getValues()에서 Number 타입 가져오는 법  (0) 2024.12.11
React Router: push와 replace의 차이점  (0) 2024.10.15
React Router v6  (0) 2024.09.26
React에서 렌더링이 발생하는 조건과 렌더링 성능 최적화 방법  (0) 2024.05.09
Hook의 규칙  (0) 2024.05.08
    'Frontend/React' 카테고리의 다른 글
    • [Rect Hook Form] getValues()에서 Number 타입 가져오는 법
    • React Router: push와 replace의 차이점
    • React Router v6
    • React에서 렌더링이 발생하는 조건과 렌더링 성능 최적화 방법
    wam
    wam

    티스토리툴바