[REACT] React Hook Form - setError (새로운 에러를 만드는 법)

학습일 : 2023. 04. 17

---

정의해 준 에러 이외의
또 다른 에러가 발생했을 경우를 위해

새로운 에러를 등록하는 법을 알아보겠다.

---

 

 

<ToDoList.tsx>

새로운 에러를 정의해주기 위해

인터페이스에 먼저 작성해주어야 하는데,

일단 간단하게 extraError라고 이름지어 보겠다.
필수는 아니므로 ?를 붙여주고,

밑에서 if문 있는 곳에서 이 에러를 써주면 된다.

그리고 리턴시 span태그로 새로 등록한 에러를 표시해보도록 한다.

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

interface IForm {
  email: string;
  firstname: string;
  lastname: string;
  username: string;
  password: string;
  password_check: string;
  // 그 외의 에러 발생시
  extraError?: string;
}

function ToDoList() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<IForm>({
    defaultValues: {
      email: "@naver.com",
    },
  });

  const onValid = (data: IForm) => {
    if (data.password !== data.password_check) {
      setError(
        "password_check",
        { message: "패스워드가 다릅니다." },
        { shouldFocus: true }
      );
    }
    // 그 외의 에러가 생겼을 경우
    setError("extraError", { message: "서버에 문제가 생겼습니다." });
  };

  return (
    <div>
      <form
        onSubmit={handleSubmit(onValid)}
...
      >
...
        <span>{errors?.extraError?.message as string}</span>
      </form>
    </div>
  );
}

export default ToDoList;

 

 

적어준 에러가 아무것도 발생하지 않았기 때문에

새로 등록해준 에러가 나타남을 확인할 수 있다.

 

 

 

 

 

이걸 활용해서 적절한 에러(?)를 만들어 볼 수 있겠음.