react-hook-form

입력 폼을 개발하는 것은 개발을 하며 대부분의 경우 접하게 되는 형식 중 하나이다. 앞서 form 게시글에서 다뤘듯이, 각 입력 필드의 상태 관리, 상태 유효성 검사, 완료 로직 등 코드가 필연적으로 많아지기 때문에 복잡해지기 쉽다. 이 입력폼을 간편하게 구현할수 있게 도와주는 라이브러리가 바로 react-hook-form 이다.

react-hook-form

Performant, flexible and extensible forms with easy-to-use validation.

npm install react-hook-form
yarn add react-hook-form

예시 코드를 통해 어떻게 작동하는지 살펴보도록 하자.

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

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  console.log(watch("example"));

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

먼저 useForm 이라는 모듈을 import해 여러 메서드 들을 사용하는것을 볼 수 있다.

register라는 메서드는 문자열을 인자로 받게 되는데, 해당 문자열을 상태값으로 등록해주는 역할을 한다.

handleSubmit 는 제출시 실행될 이벤트 핸들러 함수를 인자로 받게 된다. 이후, onSubmit의 속성값으로 사용된다.

watch는 단어 그대로 내가 register로 설정한 상태값들의 현재 값들을 보여준다.

이렇게 기존 useState로 관리하던 상태값들을 간단하고 효율적으로 다룰수 있게 도와준다. 또한 상태값의 유효성 검사 측면도 지원을 하고 있다.

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true, maxLength: 20 })} />
      <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
      <input type="number" {...register("age", { min: 18, max: 99 })} />
      <input type="submit" />
    </form>
  );
}

input태그에 사용된 register를 살펴보면, 필수작성여부, 최대길이, 패턴 등을 지정해 유효성 검사를 진행하는 함수를 만들어 사용하던 수고를 덜 수 있다.

그런데 만약 MUI 같은 외부 라이브러리를 사용해야 하는 상황에도 위에서 언급한 메서드들을 사용할 수 있는가? 이러한 외부 라이브러리들은 자체 상태관리를 사용하는 경우가 많아 react-hook-form과 결합이 쉽지않다.

react-hook-form에서는 이러한 상황을 위해 Controller라는 기능을 제공한다. 예시코드로 살펴보자.

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { TextField } from '@mui/material';

type FormValues = {
  username: string;
};

export default function App() {
  const { control, handleSubmit } = useForm<FormValues>();

  const onSubmit = (data: FormValues) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="username"
        control={control}
        defaultValue=""
        render={({ field }) => (
          <TextField
            {...field}
            label="Username"
            variant="outlined"
            fullWidth
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

위 예시 코드는 MUI 컴포넌트를 사용하는 예시이다. TextArea라는 컴포넌트를 사용하기 위해 Controller 컴포넌트의 render 속성에 넘겨서 사용한다. 이러한 경우외, 비동기 데이터, 상태동기화가 필요한 경우에도 Controller를 사용한다.