react hook form

📋 react hook form

React 기반의 폼 관리 라이브러리로, 폼 상태와 유효성 검사를 처리하기 위한 간편한 방법을 제공한다.
폼 컴포넌트의 상태 및 유효성 검사를 관리하는 데 필요한 코드 양을 대폭 줄일 수 있다.
폼 요소의 값이나 상태 변경에 대한 이벤트를 관리하기 위해 명시적인 이벤트 핸들러를 작성할 필요 없이, 단순히 Hook(useForm, useController, useWatch...)을 사용하여 관련 데이터를 추적하고 업데이트할 수 있다.

핵심 개념

useForm

react hook form의 핵심 함수로 폼의 인스턴스를 생성하고 폼 데이터와 메서드를 제공한다.

register

함수로 입력 필드를 react hook form에 등록한다.
입력 필드에 대한 유효성 검사 규칙, 기본값 등을 설정 할 수 있다.

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

const Login = () => {
    const {register} = useForm();

    console.log(register("id"));

  return (
    <form>
        <input
            placeholder="아이디"
            type="text"
            {...register("id")}
        />
        <input
            placeholder="비밀번호"
            type="password"
            {...register("pw")}
        />
        <button>제출</button>
    </form>
  )
}

watch

폼의 입력값을 추적할 수 있는 함수
입력값이 변경될 때마다 입력 값을 반환한다.

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

const Login = () => {
    const {register, watch} = useForm();

    console.log(watch());

  return (
    <form>
        <input
            placeholder="아이디"
            type="text"
            {...register("id")}
        />
        <input
            placeholder="비밀번호"
            type="password"
            {...register("pw")}
        />
        <button>제출</button>
    </form>
  )
}

handleSubmit

폼 제출 시 실행할 함수를 정의한다.

handleSubmit을 사용하면 폼 제출 시 새로고침 현상이 일어나지 않는다. (event.preventDefault() 폼 제출 방지 처리가 필요 없음)

두 개의 인자를 갖는데 아래와 같다.

• 첫 번째는 데이터가 유효할 때 호출되는 함수
• 두 번째는 데이터가 유효하지 않을 때 호출되는 함수

첫 번째 인자는 데이터가 유효할 때 호출되어야 하기 때문에 필수로 지정해야 한다.

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

const ToDoList = () => {
    const {register, watch, handleSubmit} = useForm();

    const onValid = (data : any) => {
        console.log(data);
    }

    console.log(watch());

  return (
    <form onSubmit={handleSubmit(onValid)}>
        <input
            placeholder="아이디"
            type="text"
            {...register("id")}
        />
        <input
            placeholder="비밀번호"
            type="password"
            {...register("pw")}
        />
        <button>제출</button>
    </form>
  )
}

참고

react hook form 공식문서
노마드코더