react-hook-form

react-hook-form?

ReactJS, NextJS에서 form을 사용하는 일련의 작업 과정을 간편히 만들어주는 라이브러리이다.

• User에게 입력을 받아 검색어를 크롤링하는 경우.

• API를 사용해 데이터를 fetch해오는 경우.

• form을 사용해 유저의 정보를 받는 경우 등.

  ---

  npm

  npm i react-hook-form

  ---

How to use?

우선 useForm을 import한다.

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

이후 react-hook-form은 이를 적용할 form 태그에 register를 적용함으로써 사용이 가능하다.

적용 방식은 아래와 같다.

1.register 적용

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

const Search = () => {
  const {register} = useForm();
  
	return (
      <form>
      	<input {...register("search")}/>
      </form>
    )
}

register은 form을 이용할 때 필요한 모든 기능(onChange나 isLoading 등)이 들어있는 객체이다.

> 공식문서

---

2. require 적용

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

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

	return (
      <form>
      	<input {...register("search", {require: true})}/>
      </form>
    )
}

물론, input에서 require를 적용할 수 있겠지만, 개발자도구에서 이를 수정할 수 있습니다.
react-hook-form은 이에 대한 솔루션을 제공합니다.

---

3. submitHandler 적용

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

const Search = () => {
  const {register} = useForm();
  const onValid = () => {
  	console.log("성공!")
  }

  const onValid = () => {
  	console.log("실패..")
  }


  return (
    <form onSubmit={handleSubmit(onValid, onInvalid)}>
      <input {...register("search", {require: true})}/>
    </form>
  )
}

submit 이벤트가 발생하면, 분기가 나뉘게 된다.

• 1. 유효성 검사를 통과한 경우
• 2. 유효성 검사를 통과하지 못한 경우

form에 사용되는 handleSubmit는 두 개의 콜백함수를 받는다.

첫 번째(필수) 매개변수는 유효성 검사를 통과한 경우 실행할 콜백함수.
두 번째(선택) 매개변수는 유효성 검사를 통과하지 못한 경우 실행할 콜백함수.