react-hook-form

react-hook-form

• 리액트 훅 폼은 폼을 쉽게 관리할 수 있게 도와주는 라이브러리이다.
  예를 들어 에러 처리, 유효성 검사 등을 도와준다.
• 기본적으로 리액트 훅 폼은 uncontrolled components를 사용한다. 이는 React가 아닌 브라우저의 기본 DOM 상태를 통해 입력 값을 관리한다는 의미다.
• 'ref'를 통해 직접 DOM 요소에 접근하여 값을 추출한다.
• 필요에 따라 controlled components를 사용할 수도 있다. 이는 React의 상태로 입력값을 관리하는 방식이다. (일반적으로 controlled components는 성능이 떨어질 수 있지만 리액트 훅 폼은 이를 최소화하도록 설계되어 있다.

장점

• 성능 최적화: 최소한의 리렌더링을 통해 높은 성능을 유지한다.
• 간편한 사용: 간단한 API와 직관적인 사용법을 제공한다.
• 확장성: 다양한 검증 라이브러리와 UI 프레임워크와의 쉬운 통합을 지원한다.

기본 사용방법

• useForm Hook

  • useForm 훅을 사용하여 폼의 기본 설정 초기화
  • 다양한 옵션을 통해 폼의 동작을 설정할 수 있다.

• register 함수

  • 각 입력 필드를 register 함수로 등록 (이 함수는 입력 필드의 값과 상태를 추적함)

• handleSubmit 함수

  • 폼 제출 시 호출되는 함수로 검증에 성공하면 콜백 함수가 실행된다.

• 에러

  • error 객체는 유효성 검사를 통과하지 못한 필드의 에러 메시지를 포함하며 에러 메시지는 각각의 필드 이름을 키로 가지고 있으며 errors 객체를 통해 접근할 수 있다.

  import React from 'react';
  import { useForm } from 'react-hook-form';
  
  function MyForm() {
    const { register, handleSubmit, formState: { errors } } = useForm();
  
    const onSubmit = data => {
      console.log(data);
    };
  
    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label>First Name</label>
          <input {...register('firstName', { required: true })} />
          {errors.firstName && <span>This field is required</span>}
        </div>
  
        <div>
          <label>Last Name</label>
          <input {...register('lastName', { required: true })} />
          {errors.lastName && <span>This field is required</span>}
        </div>
  
        <input type="submit" />
      </form>
    );
  }
  
  export default MyForm;