react-hook-form / 가입폼, 유효성 검사 (라이브러리)

 

공식문서는 이렇다.
Example에서 일단 복사 해서 수정 했다.

https://react-hook-form.com/get-started#Quickstart

 

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

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); // watch input value by passing the name of it

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input defaultValue="test" {...register("example")} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("exampleRequired", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  );
}

 

input의 속성에는 아래와 같은 종류가 있다.

 

 

👀

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

 

required : true, 옆에 키 : 값 으로 넣어주면 된다.

 

 

이메일 예시 // 필수입력 + 이메일정규식

{...register("Email", { required: true, pattern: /^\S+@\S+$/i })}

{ pattern : 정규식 }

이렇게 사용 할 수 있다.

 

 

비밀번호 예시 // 필수 입력 + 최소길이 6

{...register("password", { required: true, minLength: 6 })}

 

>>

 

        <label>비밀번호</label>
        <input
          name="password"
          type="password"
          {...register("password", { required: true, minLength: 6 })}
        />
        {errors.password && errors.password.type === "required" && (
          <span>비밀번호를 입력 하세요!</span>
        )}
        {errors.password && errors.password.type === "minLength" && (
          <span>비밀번호는 최소 6글자 입니다!</span>
        )}

 

 

        {errors.password && errors.password.type === "required" && (
          <span>비밀번호를 입력 하세요!</span>
        )}

이렇게 타입을 지정 해서 해당 조건을 만족하지 못하면 에러를 표시한다!

 

 

 

---

이전 프로젝트에서는 useState와 onChange 를 사용하여 하나씩 전부 다 값을 따고

조건문으로 유효성 검사를 했었는데

react-hook-form

라이브러리를 통하여 보다 쉽게 가입이나 로그인 폼을 만들 수 있다.

 

 

 

 

 

by

Get Started