React Hook Form에 대해 알아보자.

 

React Hook Form은 간편하고 유연한 방식으로 React 애플리케이션에서 폼을 다룰 수 있는 라이브러리입니다. 이를 사용하면 복잡한 폼 로직을 작성하는데 드는 시간과 노력을 줄일 수 있습니다. 이번 글에서는 React Hook Form의 사용법과 예시를 소개하겠습니다.

 

 

React Hook Form 사용법

React Hook Form은 useForm이라는 Hook 함수를 제공합니다. 이 Hook 함수를 사용하여 폼을 관리하고, 입력값의 유효성 검사와 전송 처리를 수행할 수 있습니다. 아래는 React Hook Form을 사용하여 간단한 폼을 만드는 예시입니다.

 

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

function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="username">Username:</label>
      <input type="text" id="username" {...register("username", { required: true })} />
      {errors.username && <span>Username is required.</span>}

      <label htmlFor="password">Password:</label>
      <input type="password" id="password" {...register("password", { required: true })} />
      {errors.password && <span>Password is required.</span>}

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

export default App;

 

예시: 입력값 검사

React Hook Form을 사용하면 입력값의 유효성 검사를 간편하게 처리할 수 있습니다. 예를 들어, 이메일 주소 입력 필드에서 입력값이 이메일 형식에 맞는지 검사하는 방법은 아래와 같습니다.

<input type="email" id="email" {...register("email", { required: true, pattern: /^\S+@\S+$/i })} />
{errors.email?.type === "required" && <span>Email is required.</span>}
{errors.email?.type === "pattern" && <span>Email is invalid.</span>}

위 코드에서 pattern 규칙에 정규식을 사용하여 이메일 형식을 검사합니다. errors 객체의 속성을 사용하여 검사 결과를 확인할 수 있습니다.