React - react Hook Form를 사용한 form 유효성 검사 방법

React - react Hook Form를 사용한 form 유효성 검사 방법

React Hook Form은 React에서 Form을 쉽게 만들기 위한 라이브러리입니다.

Case 01 - 패키지 설치

npm install react-hook-form

Case 02 - import 선언

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

Case 03 - useForm 선언

const { register, watch, handleSubmit, errors, formState } = useForm({ mode: "onChange" });

register register는 input에서 값을 불러오기 위한 함수로 다른 옵션을 이용하면 input의 유효성 검사를 보다 쉽게 할 수 있습니다. Input에서 ref={register({...})}으로 사용할 수 있습니다. 속성으로는 max, min, pattern등을 가지고 있습니다.

watch input에서 입력한 값을 실시간으로 확인하기 위해서는 watch라는 함수를 사용할 수 있습니다.

handleSubmit handleSubmit은 react hook form에서 Submit을 관리하기 위해 만들어진 함수입니다. handleSubmit은 watch 함수가 가장 마지막으로 출력하는 데이터와 동일합니다.

from http://kdg-is.tistory.com/131 by ccl(A) rewrite - 2021-05-24 18:00:48