react-hook-form을 이용한 회원가입

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

• 설치

$ npm i react-hook-form

• useForm 가져오기

  const { register, handleSubmit, formState: { errors }, reset } = useForm()

• onSubmit 함수 생성과 사용

  const onSubmit = ({ email, password }) => {
    console.log(email, password);

  }
  
 <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>

• Register로 등록하기

// Email Input
  <input 
          type="email" 
          placeholder="E-mail" 
          {...register("email", userEmail)}
        />

// Password Input
<input 
          type="password" 
          placeholder="Password" 
          {...register("password", userPassword)}
        />

// 넣을 객체 생성
  const userEmail = {}
  const userPassword = {}

• 유효성 검사

const userPassword = {
    required: "필수 필드입니다",
    minLength: {
      value: 4,
      message: "최소 4자입니다",
    },
    maxLength: {
      value: 13,
      message: "최대 13자입니다",
    },
    pattern: {
      value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z]{8,}$/gm,
      message: `최소 8자, 영문 1자, 숫자 1자.`,
    }
  }

이메일 유효성 검사 정규식
value: ^[\w.-]+@[a-zA-Z\d.-]+.[a-zA-Z]{2,}$
,

비밀번호 유효성 검사 정규식
value: /^(?=.[A-Za-z])(?=.\d)[A-Za-z]{8,}$/gm,

• 에러 처리하기

// 이메일 에러 처리
{errors?.email &&
        <div>
          <span className={styles.form_error}>
            {errors.email.message}
          </span>
        </div>
        }

// 패스워드 에러 처리
{errors?.password &&
        <div>
          <span className={styles.form_error}>
            {errors.password.message}
          </span>
        </div>
        }

useForm을 이용해 다양한 조건 사용하기

mode: "onBlur" | "onChange" | "onSubmit" | "onTouched" | "all";

onBlur: 인풋이었다가 Blur 상태가 될 때 유효성 검사 실행
onChange: onChange 될 때마다 유효성 검사 실행
onSubmit: 제출 시 유효성 검사 실행

폼 제출 후 input 비우기

 const { register, handleSubmit, formState: { errors }, reset } = useForm({
    mode: 'onBlur'
  })

• formState의 reset을 사용한다

// 제출 클릭 시 reset을 사용해 form 비우기
  const onSubmit = ({ email, password }) => {
    console.log(email, password);
    // getDataForm(email, password);
    reset();

  }