react-hook-form을 사용한 form 만들기

최대한 라이브러리를 사용하지 않고 구현을 하는 것에 집중을 하다가 평소에 제일 사용해보고 싶었던 라이브러리인 react-hook-form을 사용하여보았다. 

그래서 react-hook-form의 기초적인 형태에 대해 작성해보고자 한다.

 

해당 글은 NestJS 13버전과 React-hook-form 7버전을 바탕으로 작성한 글이다.

 

사용한 계기

form을 일일히 만드는 것은 매우 귀찮은 일이다. 
전체적인 form을 만들고, 각각의 input에 onChange를 적용하여 값이 변할 때마다 useState값을 갱신한 후 이를 제출할 때 유효성을 검사하는 이벤트를 다 작성해주고, 통과한다면 이벤트를 실행시키고, 통과하지 못한다면 에러가 발생한 부분에 문구를 출력해주는 등 이러한 작업들을 모두 일일히 작성해줘야 하는데 react-hook-form을 사용하면 위의 일을 모두 간단하게 구현하는 것이 가능해진다 .

 

하지만 기본적인 form의 형태와 전체적인 과정을 알고서 해당 라이브러리를 사용해야 한다. 

단순히 귀찮고 과정이 복잡하다고 form의 기초와 과정을 모른 상태에서 해당 라이브러리를 사용하는 것은 추천하지 않는다. 꼭 직접 구현해보고 라이브러리를 통해 어떤 과정이 생략되고, 왜 사용하는지 생각해봐야 한다.

사용해보기

• npm i react-hook-form

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

type Info = {
  id: string,
  password: string,
};


export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm<Info>();
  const onSubmitHandler: SubmitHandler<Info> = data => console.log(data);
  console.log(watch("id"))

  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <input {...register("id")} /> 
      <input {...register("password", { required: true })} />
      {errors.exampleRequired && <span>This field is required</span>}
      <input type="submit" />
    </form>
  );
}

 

공식 문서에 나온 기본적인 형태인데 이름만 보기 쉽게 바꾼 것이다. 

아래에 작성한 순서는 정해진 것이 아니기 때문에 순서는 작성하기 편한대로 바꾸길 권장한다.

1. 관리할 데이터의 타입을 작성

타입스크립트로 작성중이라면 제일 먼저 해야할 것은 관리할 데이터의 타입을 작성해줘야 한다. 

공식문서에는 type alias를 사용하여 작성되어있는데 interface를 사용해서 작성해도 문제가 없다.

 

2. useForm에서 제공하는 함수들 받아오기

사용하고자 하는 함수들을 useForm에서 받아와야 하는데 이떄 타입스크립트를 사용한다면 위에서 작성한 관리해야하는 데이터의 타입을 제네릭 형태로 전달해줘야한다. 

구조 분해 할당 형태로 받아오는 것이 편리하기 때문에 이를 꼭 사용해서 받아오는 것을 추천한다.

 

3. form 작성 및 onSubmit에 handleSubmit함수 등록

form을 작성하고 onSubmit이 발생하였을 때 실행할 함수에는 useForm에서 받아온 handleSubmit를 넣어주고, 인자로 콜백을 전달해줘야 한다. 

이때 handleSubmit는 인자로 받은 콜백을 실행하기 전에 유효성 검사를 한 뒤 콜백 함수를 실행해주는 역할을 한다. 

 

4. handleSubmit 함수에 전달한 콜백 구현

handleSubmit이 실행되고 유효성 검사에 통과하게 된다면 해당 콜백이 실행된다.

이때 useForm에서 제공하는 SubmitHandler라는 것을 가져와 콜백함수의 타입으로 전달을 해줘야한다.

위에서 작성한 타입(다뤄야 하는 데이터 타입)을 제네릭의 형태로 같이 전달해줘야 한다. 

데이터를 잘 받아오는지 확인하는 console.log를 작성해보자.

 

5. 데이터를 받아야 하는 input에 register 등록 및 옵션 추가

입력받는 input에 register를 넣어주는데  이때 전개연산자의 형태로 함수를 작성해줘야 한다.

그리고 첫번째 인자로 해당 값이 어떤 type인지를 작성해줘야 한다. 이떄 위에서 작성한 타입과 동일한 타입을 작성해줘야 한다. 

이후 두번째 인자로 옵션을 작성해주는데 최소 글자가 몇글자인지, 필수인지 등 지원하는 옵션이 많기 때문에 이는 공식문서를 통해 직접 보는 것을 추천한다. 

 

6. 에러가 발생하였을 때 보여줄 경고 문구 추가

만약 input 필드의 유효성 검사에서 통과하지 못할 경우에는 useForm에서 받아온 에러에 반환이되는데 이때 에러를 출력해주는 것이 가능하기 때문에 문구를 보여줄 곳에 위의 예시처럼 작성해주면 된다.

 

watch 함수의 경우 해당 함수의 인자로 받은 값을 실시간으로 모니터링하는 것이 가능한 함수로, console.log를 통해 실행시켜보면 값이 변할때마다 출력하는 것을 알 수 있다.