[React] react-hook-form

use Form 사용기

본 포스팅은 밑의 가이드를 보고 포스팅 함을 알립니다. (보다 모르겠으면 이거 보셈)
https://mycodings.fly.dev/blog/2023-09-10-all-in-one-about-react-hook-form

기본연결

const {register} = useform();
// 이렇게 불러와서 

<form>
  <div className='w-1/3'>
    <label htmlFor='username'>Username</label>
    <input type='text' id='username' {...register('username')} />
    <label htmlFor='email'>E-mail</label>
    <input type='email' id='email' {...register('email')} />
    <label htmlFor='password'>Password</label>
    <input type='password' id='password' {...register('password')} />
    <button>Submit</button>
  </div>
</form>
// 연결 예시

React hook form DevTool

React-Hook-Form은 Devtool을 제공, Form 관리를 일일이 콘솔 창에 출력하지 않고
인풋에 입력되는 값을 실시간으로 추적 가능

const {register,control} = useform();
// 이렇게 불러 온 후

<DevTool control={control}
// 이렇게 인풋 코드들의 맨밑에 불러오면 DevTool 사용 가능

onSubmit 하는법

const submit = (arg)=>{
 console.log(arg)
}

<form onsubmit={handleSubmit(submit(params))}
// handleSubmit 고정함수에 submit 함수를 넣어 사용하는 것이 관습

유효성 검증

Form의 유효성 검증으로 React-Hook-Form이 제공하는 기본 검증은 밑과 같다

• required
• minLength & maxLength
• min & max
• pattern // 정규식 유효성 검증
  
  예시

<input
  type='email'
  id='email'
  {...register('email', {
    pattern: {
      value:
        /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
      message: 'Email is invalid.',
    },
  })}
/>

에러 표시

const {formState: { errors }} = useForm<FormValues>();

<p>{errors.username?.message}</p>
<p>{errors.email?.message}</p>
<p>{errors.password?.message}</p>

// 만약 userName에 유효성 검증이 두개 있을 경우

error.userName.type === "검증하는 타입" && <p>"에러 메시지 수동으로"</p>

커스텀 Validation 함수 만들기

<input type='email' id='email'
  {...register('email', {
    pattern: {
      value:
        /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
      message: 'Email is invalid.',
    },
    validate: {
	  noAdmin: fieldValue => {
  	   if (fieldValue === 'admin@fly.dev') {
    	  return 'You can not use admin@fly.dev!';
  	    }
	  }
    },
  })}
/>

default values

type FormValues = {
  username: string,
  email: number,
  password: Date,
}

const { register} = useForm <FormValues> {
  defaultValues: {
    username: 'IU',
    email: '',
    password: '',
  },
}

watch를 이용해서 실시간으로 FormValues 감시하기

const {
    register,
    control,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: {
      username: "IU",
      age: 0,
      dob: new Date(),
    },
  });

  const watchForm = watch("username");
  const watchForm2 = watch("age");

  renderCount++;
  return (
    <div className="w-full p-4">
      <h1 className="text-2xl mb-5"> Render count : {renderCount / 2}</h1>
      <h2 className="text-xl mb-5">
        watch value : {watchForm} and {watchForm2}
      </h2>
    ...
    ...
    ...
  )
}

무조건 watch는 useEffect에 넣어서 사용

import { useEffect } from 'react'

const {
  register,
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm <
FormValues >
{
  defaultValues: {
    username: 'IU',
    age: 0,
    dob: new Date(),
  },
}

useEffect(() => {
  const subscription = watch(value => {
    console.log(value)
  })

  return () => subscription.unsubscribe()
}, [watch])

폼 항목 disable 하기

disabled를 watch함수와 같이 쓸 수 있는데요.

<input
  type="number"
  id="age"
  {...register("age", {
    disabled: watch("username") === "",
    valueAsNumber: true,
    required: "Age is required.",
  })}
/>

handleSubmit 에러 발생시

useForm() 함수가 리턴 하는 handleSubmit 함수를 이용해서 폼의 Submit 핸들링을
담당하는 함수를 지정했었는데, Submit이 실패했을 때도 핸들링할 수 있는 함수를 제공함

handleSubmit 함수에 두 번째 인자가 폼 Submit이 실패했을 때 실행되는 콜백함수이다

<form onSubmit={handleSubmit(onSubmit, onError)} noValidate>
위 코드와 같이 onSubmit 함수는 우리가 Submit이 성공했을 때 작동되도록 만든 함수이고,

onError 함수는 Submit이 실패했을 때 작동되도록 만들 예정인 함수입니다

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

  const onError = (errors: FieldErrors<FormValues>) => {
    console.log("Form errors", errors)
  }

Submission 상태값과 reset 함수

React-Hook-Form의 formState에는 폼 Submission 상태 값이 4개가 있다.

• isSubmitting,
• isSubmitted,
• isSubmitSuccessful,
• submitCount
  
  isSubmitting 상태는 submit 버튼을 눌렀을 때고,
  isSubmitted 상태는 submit이 눌러져서 벌써 액션이 취해졌을 때,
  isSubmitSuccessful은 submit이 성공적으로 작동했을 때,
  submitCount는 성공적인 submit의 갯수를 나타냄.
  
  응용 예시
  

useEffect(()=>{
  if(isSubmitSuccessful) { 
    reset()
  }
},[isSubmitSuccessful, reset])