React | React Hook Form

🔥 React Hook Form

✨ install

npm install react-hook-form

🔥 useForm()

✨ register() ✨ watch()

register("name")를 통해 name으로 등록한다.
watch("name")을 통해 name의 값을 실시간으로 탐지할 수 있다.

function Form() {
  const {
    register,
    watch,
  } = useForm<IForm>();
  
  console.log(watch("name"));

  return (
    <>
      <form>
        <input {...register("name")} placeholder="name" />
      </form>
    </>
  );
}

• input

• console

t
te
tes
test

✨ handleSubmit()

1. basic

function Form() {
  const { register,  handleSubmit } = useForm<IForm>();

  const onSubmit: SubmitHandler<IForm> = (data) => {
    console.log(data);
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("name")} placeholder="name" />
        <button>submit</button>
      </form>
    </>
  );
}

onSubmit 인자에 handleSubmit(onSubmit)을 전달한다. 정의하는 것이 아닌 호출해야 한다.
다음과 같이 입력하고 submit 해보면 페이지는 refresh 되지않고 값을 object 타입으로 출력해준다.

• input
  

• console

{name: 'test'}

2. 여러개의 input

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("name")} placeholder="name" />
  <input {...register("email")} placeholder="email" />
  <input {...register("password")} placeholder="password" />
  <input {...register("password2")} placeholder="password2" />	       
  <button>submit</button>
</form>

다음과 같이 입력후 submit 한 결과이다.

• input
  

• console

{name: '지성팍', email: 'ex@ex.com', password: 'pwd1', password2: 'pwd2'}

✨ validation

1. validation check

register()의 두 번째 인자로, object를 전달할 수 있다.
값이 유효한지 체크하는 object이다.
type에는 required 뿐만 아니라 pattern, minLength, maxLength, validate등 다양한 type이 존재한다. validate는 직접 만든 함수를 이용해 validation check한다.

<input {...register("name", { required: true })} placeholder="name" />

2. errors

required: true를 설정하고 입력하지 않았을 경우를 살펴보자.

function Form() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<IForm>();

  const onSubmit: SubmitHandler<IForm> = (data) => {
    console.log(data);
  };
  console.log(errors);

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("name", { required: true })} placeholder="name" />
        <input {...register("email", { required: true })} placeholder="email" />
        <input
          {...register("password", { required: true })}
          placeholder="password"
        />
        <input
          {...register("password2", { required: true })}
          placeholder="password2"
        />
        <button>submit</button>
      </form>
    </>
  );
}

자동으로 커서가 에러 발생 지점으로 옮겨진다.

• console
  console을 살펴보면 어떤 type에 의해 발생했는지 알 수 있다.

password: {type: 'required', message: '', ref: input}

3. error message

<input
  {...register("name", {
    required: {
      value: true,
      message: "name is required",
    },
  })}
  placeholder="name"
/>

특정 type에 대해 error 발생시, message를 설정하고 출력할 수 있다.

<span>{errors?.name?.message}</span>

✨ setError

setError error를 설정할 수 있다.
submit했을 때, password password2 두 개의 값이 일치하지 않는다면 error를 설정하고, shouldFocus를 통해 커서를 password로 이동시켜준다.

function ToDoList() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<IForm>();

  const onSubmit: SubmitHandler<IForm> = (data) => {
    if (data.password !== data.password2) {
      setError(
        "password",
        { message: "passwords are not same" },
        { shouldFocus: true }
      );
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
		//...(skip)
        <input
          {...register("password", { required: true })}
          placeholder="password"
        />
        <span>{errors?.password?.message}</span>
        <input
          {...register("password2", { required: true })}
          placeholder="password2"
        />
        <button>submit</button>
      </form>
    </>
  );
}