React useForm으로 form 만들기

React Hook Form

리액트로 폼을 만들 때 폼마다 useState로 입력값을 관리하고 폼을 직접 작성하는 검증 등이 어렵다.
그때는 리액트 훅 포엠useForm을 사용할 수 있었다.
이번에는 다음 샘플의 사용 부분에 대해 설명하고 싶습니다.샘플의 디자인 사용tailwind CSS

소스 코드
https://github.com/copetit/redpanda-nextjs/blob/main/pages/login.tsx
공식 문서
https://react-hook-form.com/jp/
https://react-hook-form.com/api/useform

설치하다.

$ npm install react-hook-form

// react18利用中にDependancyエラーの場合
// react18の場合まだ使えないため、後ろに --legacy-peer-deps　をつけてインストールします
$ npm install react-hook-form --legacy-peer-deps

설치 후 import에서 사용할 수 있습니다.

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

useForm 정보

// formで利用する値の
interface LoginForm {
  email: string;
  password: string;
}

// 利用するメソッドを定義しています。ここの今回メソッドを以下で説明します。
const {
  register,
  watch,
  handleSubmit,
  formState: { errors },
} = useForm<LoginForm>();

method

register

폼에서 입력한 값을state 관리와 검증 처리할 수 있습니다.
다음 소스 코드는 이메일 형식의 값을 받아들여 항목 입력에 필요한 검증 처리가 적혀 있습니다.

<div className="flex w-full flex-col">
<label className="text-sm text-gray-800" htmlFor="email">
  Email
</label>
<input
  {...register("email", { required: "emailを入力してください" })}
  className="rounded-md border px-3 py-2 focus:border-2 focus:border-teal-500 focus:outline-none"
  type="email"
  name="email"
/>
</div>

https://react-hook-form.com/api/useform/register

watch

창의 값 수정을 감시할 수 있습니다.문서에는 체크 상자에서 선택을 한 후 창을 표시하는 예시가 포함되어 있습니다.
https://react-hook-form.com/api/useform/watch

handleSubmit

자세submit을 할 때의 처리.handleSubmit() 두 개의 매개 변수를 받아들인다.
매개변수 1은 검증 처리 OK 시 함수이고 매개변수 2는 검증 처리 NG 시 함수입니다.
다음 소스 코드는password 검증이 실패했을 때 이렇게 console입니다.닫기

// バリデーション処理がOKの場合に呼ばれる関数
const isValid = (data: LoginForm) => {
  console.log(data);
};

// バリデーション処理がNGの場合に呼ばれる関数
const isInValid = (erros: any) => {
  console.log(errors);
  console.log("Fail Login");
};

<form onSubmit={handleSubmit(isValid, isInValid)} className="flex w-full  flex-col items-center space-y-5 ">
  //省略
</form>

https://react-hook-form.com/api/useform/handlesubmit

formState

object를 통해 폼의 상태를 관리합니다.formState: { errors, isDirty, isSubmitting, touchedFields, submitCount }여러 가지 상태를 사용할 수 있지만 여기서는 가장 많이 쓰는 것errors만 설명한다.
폼에 오류가 발생했을 때 errors.[項目名] 오류가 있는 Object입니다.{errors.password?.message}와 같이 창에 잘못된 정보를 표시할 수 있습니다.

<input
{...register("password", {
  required: "passwordを入力してください",
  minLength: { value: 8, message: "8文字以上入力してください" },
})}
className="rounded-md border px-3 py-2 focus:border-2 focus:border-teal-500 focus:outline-none"
type="password"
name="password"
/>
<div className="mt-1 font-semibold text-rose-500">
  {errors.password?.message}
</div>

https://react-hook-form.com/api/useform/formstate

Props

이번에는 기본 onSubmit이므로 소스 코드에는 없습니다.
useForm 자체도 다양한 프로포즈를 받아 맞춤 제작할 수 있습니다.

useForm({
  mode: 'onSubmit',
  reValidateMode: 'onChange',
  defaultValues: {},
  resolver: undefined,
  context: undefined,
  criteriaMode: "firstError",
  shouldFocusError: true,
  shouldUnregister: false,
  shouldUseNativeValidation: false,
  delayError: undefined
})

그중mode은 검증을 진행할 시간을 지정할 수 있다.
onSubmit
기본값은 onSubmit입니다.submit 에서 오류가 발생했습니다.
onChange
입력할 때 오류가 발생합니다.
onBlur
input 이외를 눌렀을 때 오류가 발생했습니다.온블럽 샘플입니다.

const {
  register,
  watch,
  handleSubmit,
  formState: { errors },
} = useForm<LoginForm>();

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

총결산

useForm을 사용하면 상당히 간단하게 형식을 완성할 수 있습니다.
또 발리데이 샘플 등 친절하게 작성된 문서도 있으니 사용 시 꼭 읽어주시기 바랍니다.