[React] React Hook Form

 

React Hook Form은 왜 필요했을까? 

 

여러 회사에서도 사용하고 있다. 

그 중에 유일하게 react-hook-form을 왜 사용하는지 이유를 써놓은 회사가 있어서 가져와봤다. 

Toss에서는 왜 React Hook Form을 사용하는지 아래와 같이 간단하게 기재되어있다.

 

React Hook Form 홈페이지에서는 아래와 같은 텍스트가 가장먼저 나온다.

 

 

이렇게만 설명하면 확 와닿지 않으니 예제코드를 보면 바로알 수 있다.

 

아래 코드는 유저이름 이메일 비밀번호를 입력할수 있는 정말 간단한 form을 react로 구현한 것이다.

'use client';
import { useState } from 'react';

type InputType = 'text' | 'email' | 'password';

export default function Forms() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const onChange = (
    event: React.SyntheticEvent<HTMLInputElement>,
    inputType: InputType
  ) => {
    const { value } = event.currentTarget;
    if (inputType === 'text') setUsername(value);
    if (inputType === 'email') setEmail(value);
    if (inputType === 'password') setPassword(value);
  };

  const onSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
    event.preventDefault();
  };

  return (
    <form onSubmit={onSubmit}>
      <input
        value={username}
        onChange={(event) => onChange(event, 'text')}
        type='text'
        placeholder='Username'
        minLength={5}
        required
      />
      <input
        value={email}
        onChange={(event) => onChange(event, 'email')}
        type='email'
        placeholder='email'
        required
      />

      <input
        value={password}
        onChange={(event) => onChange(event, 'password')}
        type='password'
        placeholder='Password'
        required
      />
      <input type='submit' value='Create Account' />
    </form>
  );
}

 

input에 있는 속성은 웹의 개발자도구에서 html 속성을 제거하면 무용지물이 되어서 원치 않은 결과가 submit될 수 있다. 

지우기 전

 

개발자도구에서 required 지운 후

따라서 Submit 이 동작할 때 개발자가 의도한 값을 받았는지 전부 확인해줘야 한다. (이 코드에서보다 더 꼼꼼하게 확인해줘야한다.)

 

그리고 의도한 값이 아니라면 에러를 발생시키고 사용자가 어떠한 오류를 저질렀는지 알려줘야한다. 

여기서는 극히 일부만 작성하였지만 더 많은 조건들이 포함될 수 있다.  

 

예를 들어 비밀번호는 특수문자와 몇글자 이상으로 해야한다든지 아이디는 영어만 가능한다든지 에러의 종류만 해도 수십 수백개가 될 수 가 있다. 그렇다면 이러한 것들을 전부 작성해야하는데 할 수 있겠는가?  지금은 3개의 input이지만 나중에 주소, 생년월일, 직업, 영어이름 등등 input이 더 많이 필요하다면 더 많은 에러체크가 필요하고 그에따라 onChange함수도 더 많이 필요해진다.  

 

이러한 문제들을 한 번에 그것도 훨~~씬 더 적은 코드로 해결할 수 있는게 바로 React Hook Form이다. 

 

 

 

React Hook Form 을 사용하면 아래처럼 코드를 줄일 수 있다. 

 

1. register()

register()

이 함수가 핵심이다.  `register()`를 실행하면  객체를 반환한다.  

그 객체안에는 `onChange`, `onBluer`, `name`, `ref`   즉 `input` 속성으로 이전에 우리가 사용했던  `name="username`과 `onChange={onChange}`굳이 작성할 필요가 없어진다.  

 

 

 

Otions

register() 함수로  `required`, `maxLength`등을 넣어줄 수 있다.  

이렇게 함수를 통해서 속성을 넣어주면 웹 브라우저 개발자 속성에서 강제로 지울 수 없다.

1) required (boolean)

<input
  {...register("test", {
    required: true
  })}
/>

 

2) maxLength (number)

<input
  {...register("test", {
      maxLength: 2
  })}
/>

 

 

3) minLength (number)

	
<input
  {...register("test", {
    minLength: 1
  })}
/>

 

 

4) max / min (number)

<input
  type="number"
  {...register('test', {
    max: 3
  })}
/>

 

 

5) pattern (RegExp)

<input
  {...register("test", {
    pattern: /[A-Za-z]{3}/
  })}
/>

 

6) validate ( Function | Object )

<input
  {...register("test", {
    validate: (value, formValues) => value === '1'
  })}
/>
// object of callback functions
<input
  {...register("test1", {
    validate: {
      positive: v => parseInt(v) > 0,
      lessThanTen: v => parseInt(v) < 10,
      validateNumber: (_, values) =>
        !!(values.number1 + values.number2), 
      checkUrl: async () => await fetch(),
    }
  })}
/>

 

7) valueAsNumber (boolean)

<input
  type="number"
  {...register("test", {
    valueAsNumber: true,
  })}
/>

 

8) setValueAs ( <T>(value: any) => T)

<input
  type="number"
  {...register("test", {
    setValueAs: v => parseInt(v),
  })}
/>

 

9) disabled (boolean = false)

<input
  {...register("test", {
    disabled: true
  })}
/>

 

 

2. setValue()

등록된 필드의 값을 동적으로 설정하고, 유효성을 검사하고, 양식 상태를 업데이트할 수 있는 옵션을 제공한다.

동시에 불필요한 재렌더링을 피하려고 한다. 

 

쉽게 말해 input 칸에 미리 양식을 입력해둘 수 있다. 

 

 

예제 코드 

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

const App = () => {
  const { register, setValue } = useForm();
  
  return (
    <form>
      <input {...register("firstName")} />
      <button type="button" onClick={() => setValue("firstName", "Bill")}>
        setValue
      </button>
      <button
        type="button"
        onClick={() =>
          setValue("lastName", "firstName", {
            shouldValidate: true,
            shouldDirty: true
          })
        }
      >
        setValue options
      </button>
    </form>
  );
};

 

 

Reference

 

React-Hook-Form