[ React Hook Form ] react에서 form 쉽게 이용하기 (+TypeScript)

 

0. 이용 목적

react에서 form을 사용해 본 사람이면 알겠지만,

더욱이 form의 개수가 한 두 개가 아닌 무더기로 있어본 경험을 해본 사람이면 알겠지만

react에서 form을 만들고 input과 button을 관리하는 데는 은근히 신경 쓸 부분이 많다.

input에 작성된 값을 인식하고... 보내고... preventDefault() 까지

익숙하다면 익숙한 과정이지만 더 간결한 코드를 위해 이번 프로젝트에서 이용해 보았다.

react에서 form을 작성하는게 지겹다면 꼭 한번 시도해보면 좋을 것!

react 뿐만 아니라 react native에서도 사용할 수 있다

1. 설치

설치

npm install react-hook-form

혹은

yarn add react-hook-form

2. 사용 방법

✍ 기본적으로 사용하기

useForm에서 받아올 수 있는 인자들

 

register

기본값

const { register } = useForm({
  mode: 'onSubmit',
  reValidateMode: 'onChange',
  defaultValues: {},
  resolver: undefined,
  context: undefined,
  criteriaMode: "firstError",
  shouldFocusError: true,
  shouldUnregister: true,
})

 

errors

각 인풋에 대응되는 폼 에러 혹은 에러 메시지를 가진 객체

 

watch

인풋을 관찰하고 그 값들을 반환, 렌더링 할 대상을 결정할 때 유용하다

 

handleSubmit

유효성 검사가 완료되었을 때 폼 데이터를 전달한다

async 함수를 전달할 수도 있음

 

reset

폼 안의 필드 값과 에러를 초기화

  useEffect(async () => {
    const result = await fetch('./api/formValues.json'); 
    reset(result); // asynchronously reset your form values
  }, [reset])

 

setError / clearErrors

입력값 에러를 수동으로 설정할 수 있다. / 에러를 리셋할 수 있다

 

setValue

동적으로 인풋 / 셀렉트 값을 설정할 수 있다.

setValue('name', '')

=> name 필드를 비우라는 말

getValue

폼의 값을 읽을 때 사용.

등등..

 

 

 

 

 

✍ JavaScript / TypeScript

 

JS

react-hook-form을 사용하기 위해서는

useForm이라는 hook을 가져와야 한다.

form을 이용하고 싶은 부분에

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

useForm을 import한 후

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

const Example = () => {
  const { handleSubmit, register, watch, formState: { errors } } = useForm(); // ✨ 1
  const onSubmit = values => console.log(values);

  console.log(watch('username')) // ✨ watch
  return (
    <form onSubmit={handleSubmit(onSubmit)}> // ✨ handleSubmit
      <input
        type="email"
        {...register("email", { // ✨ register
          required: "Required",
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "invalid email address"
          }
        })}
      />
      {errors.email && errors.email.message} // ✨ error

      <input
        {...register("username", { // ✨ register
          validate: value => value !== "admin" || "Nice try!"
        })}
      />
      {errors.username && errors.username.message} // ✨ error

      <button type="submit">Submit</button>
    </form>
  );
};

• useForm을 import한 후 원하는 요소들을 가져와준다
  • handleSubmit
    submit이 발생했을 때 시행할 함수를 handleSubmit으로 연결해준다
    e.preventDefault()가 필요없다.
  • register
    form 안의 input에 register의 모든 요소(...register)을 가져와준다.
    첫 인자에는 input의 고유한 이름을 넣어주고 🚨 꼭!!
    보는 바와 같이
    required 여부, pattern {value, message..}등등 필요한 인자들을 넣어주고 유효성 검사를 적용할 수 있다.
  • errors
    에러가 발생했을 때( errors.email => 'email'이라는 이름을 가지고 있는 input에서 에러가 발생했을 때)
    pattern의 message를 보여준다

TS

import React from "react";
import ReactDOM from "react-dom";
import { useForm, SubmitHandler } from "react-hook-form";  // ✨ SubmitHandler

enum GenderEnum { 
  female = "female",
  male = "male",
  other = "other"
}

interface IFormInput { // ✨ 1
  firstName: String;
  gender: GenderEnum;
}

export default function App() {
  const { register, handleSubmit } = useForm<IFormInput>(); // ✨ 1
  const onSubmit: SubmitHandler<IFormInput> = data => console.log(data); // ✨ SubmitHandler

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <input {...register("firstName")} /> // ✨ 1-1
      <label>Gender Selection</label>
      <select {...register("gender")} > // ✨ 1-2
        <option value="female">female</option>
        <option value="male">male</option>
        <option value="other">other</option>
      </select>
      <input type="submit" />
    </form>
  );
}

• SubmitHandler을 react-hook-form으로부터 받아와 handleSubmit()에 전달하는 함수를 정의하는데 써줘야 한다
• useForm 안에 들어가는 register의 첫 요소 즉 key를 interface로 정의해주어야 한다.

 

 

 

 

✍ 더 이용해보기

 

🐾 유효성 검사 적용하기

• required : 필수적인지
• min : 최소(숫자)
• max : 최대(숫자)
• minLength : 최소길이(length)
• maxLength : 최대길이(length)
• pattern : 입력에 대한 정규식 패턴
• validate : 콜백 함수를 인수로 전달하거나 객체를 전달하여 검증할 수 있다.

import React from "react";
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 })} /> // ✨ required / maxLength
      <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} /> // ✨ pattern
      <input type="number" {...register("age", { min: 18, max: 99 })} /> // ✨ min / max
      <input type="submit" />
    </form>
  );
}

 

 

기본적으로 쓸법한 내용들만 가져왔으니 더 많은 내용을 원한다면

공식문서를 확인하자

 

 

 

 

 

🙇‍♀️

https://react-hook-form.com/