[React] Hooks - useForm을 사용한 로그인 폼 예제

useForm이란?

useForm은 react-hook-form 라이브러리에서 제공하는 커스텀 훅으로 폼의 상태와 유효성 검사를 간편하게 관리할 수 있게 해준다. 이 훅은 form 데이터를 처리하는 데 필요한 다양한 기능을 제공하며 기존의 React 상태 관리 방식보다 가볍고 효율적으로 폼을 관리할 수 있도록 도와준다.

 

설치 방법

npm install react-hook-form

 

useForm의 장점

• 성능 최적화: react-hook-form은 DOM 렌더링을 최소화하여 폼의 성능을 높인다.
• 간결한 코드: register와 handleSubmit을 통해 필요한 코드량을 줄여주고 직관적으로 작성할 수 있다.
• 유연한 유효성 검사: 필수 항목부터 비동기 검증까지 다양한 유효성 검사 옵션을 지원힌다.
• 훅 기반 구조: useForm은 React 훅의 구조를 그대로 따르기 때문에 다른 훅과도 쉽게 통합할 수 있다.

기본 사용법 및 주요 기능

useForm은 사용 방법이 굉장히 간단하고 편리하다. 아래 useForm에 대한 공식 문서를 살펴보면 쉽게 이해가 되고 사용하는데 지장은 없을 것이다.

Get Started

 

로그인 폼 예제

register: 입력 필드에 연결하여 useForm 훅이 해당 필드를 관리할 수 있게 한다. 이때 유효성 검사 규칙을 추가할 수도 있다.

handleSubmit: 폼이 제출될 때 실행되는 함수를 정의할 수 있도록 도와주는 메서드이다.

formState: 현재 폼의 상태와 오류 메시지 등을 포함한다.

errors: 각 필드의 오류 상태와 메시지를 확인할 수 있다.

import React from 'react';
import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm(); // useForm 초기화

  // 폼이 제출되었을 때 실행될 함수
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}> {/* handleSubmit로 폼 제출 처리 */}
      <div>
        <label>Email</label>
        <input 
          type="email"
          {...register("email", { required: "Email is required" })} // 필수 항목 설정
        />
        {errors.email && <p>{errors.email.message}</p>} {/* 오류 메시지 표시 */}
      </div>

      <div>
        <label>Password</label>
        <input 
          type="password"
          {...register("password", { required: "Password is required" })} // 필수 항목 설정
        />
        {errors.password && <p>{errors.password.message}</p>} {/* 오류 메시지 표시 */}
      </div>

      <button type="submit">Login</button>
    </form>
  );
}

export default LoginForm;

 

주요기능

유효성 검사 (Validation)

useForm은 클라이언트 측 유효성 검사를 손쉽게 처리할 수 있도록 돕는다. register 함수에 옵션을 추가하여 유효성 검사를 정의할 수 있다. 최소 길이, 최대 길이, 정규 표현식 등을 통해 유효성 검사를 적용할 수 있다.

<input 
  type="password"
  {...register("password", {
    required: "패스워드는 필수입니다.",
    minLength: {
      value: 8,
      message: "패스워드는 최소 8자 이상이여야 합니다."
    }
  })}
/>

 

비동기 유효성 검사

비동기 유효성 검사도 가능하다.

예를 들어, 사용자 이름이 이미 사용 중인지 서버에 확인할 때 유용하다. 

<input 
  type="text"
  {...register("username", {
    required: "이름은 필수로 입력하셔야 합니다.",
    validate: async (value) => {
      const response = await fetch(`/api/check-username?username=${value}`);
      const data = await response.json();
      return data.isAvailable || "이미 사용중인 이름";
    }
  })}
/>

 

폼 리셋 (Reset Form)

useForm의 reset 메서드를 사용하면 폼을 초기 상태로 되돌릴 수 있다.

reset은 폼 제출 후 다시 빈 상태로 만들거나 특정 조건에 따라 폼 필드를 초기화할 때 유용하다.

const { register, handleSubmit, reset } = useForm();

const onSubmit = (data) => {
  console.log(data);
  reset(); // 폼 리셋
};

 

참고문헌

Get Started

GitHub - react-hook-form/react-hook-form: 📋 React Hooks for form state management and validation (Web + React Native)