TIL56-01 React Hook Form

React Hook Form

• React Hook Form은 React 애플리케이션에서 양식을 관리하기 위한 경량 라이브러리입니다.
• React Hook Form의 주요 기능 중 하나는 useForm, useField 및 useController와 같은 React 후크를 사용하여 개발자가 선언적이고 직관적인 방식으로 양식 상태를 관리하고 양식 제출을 처리할 수 있도록 합니다.
• 또한 React Hook Form은 필수 필드, 최소값 및 최대값, 정규식, 사용자 지정 유효성 검사 함수를 비롯한 여러 가지 기본 제공 유효성 검사 규칙을 제공합니다. 또한 비동기 양식 유효성 검사를 지원하고 Material UI 및 Bootstrap과 같은 널리 사용되는 UI 라이브러리와 원활하게 통합됩니다.
• React의 다른 양식 라이브러리와 비교할 때 React Hook Form은 번들 크기가 더 작고 성능이 더 빨라 고성능 웹 애플리케이션을 구축하는 데 적합합니다.

간단한 예시 코드

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

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

  function onSubmit(data) {
    console.log(data);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name:</label>
      <input {...register("name", { required: true })} />
      {errors.name && <span>This field is required</span>}

      <label htmlFor="email">Email:</label>
      <input {...register("email", { required: true, pattern: /^\S+@\S+$/i })} />
      {errors.email && <span>Please enter a valid email address</span>}

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

• 이 예제에서는 react-hook-form 라이브러리에서 useForm 후크를 가져오고 이를 호출하여 양식 객체를 생성합니다. 그런 다음 객체 구조 분해를 사용하여 양식 객체에서 register 함수, handleSubmit 함수 및 errors 객체를 추출합니다.

• 양식이 제출될 때 양식 데이터를 콘솔에 기록하는 handleSubmit 함수를 정의합니다. 또한 사용자 이름과 이메일 주소에 대한 두 개의 입력 필드를 정의하고 등록 기능을 사용하여 각 필드를 양식에 등록합니다. 사용자가 값을 입력하도록 요구하는 'required: true' 및 이메일 주소가 유효한 형식.

• 마지막으로 제출 버튼을 양식에 추가하고 handleSubmit 함수를 onSubmit 핸들러로 전달합니다. 또한 useForm 후크에서 반환된 errors 개체를 사용하여 각 필드에 대한 오류 메시지를 렌더링합니다.

• 이것은 단순한 예일 뿐이지만 React Hook Form은 React 애플리케이션에서 복잡한 양식을 구축하기 위한 더 많은 기능과 옵션을 제공합니다.