Formik

Formik

유효성 검사, 오류 처리, Submit을 쉽게 해주는 React 라이브러리

 <Formik
        initialValues={{
          name: "",
          email: "",
          password: "",
          password_confirmation: "",
        }}
        validationSchema={SignUpSchema}
        onSubmit={async (values, { setSubmitting }) => {
          await sleep(400);
          setSubmitting(false);
          f7.dialog.preloader("잠시만 기다려주세요...");
          try {
            (await signup({ user: values })).data;
            toast.get().setToastText("로그인 되었습니다.").openToast();
            location.replace("/");
          } catch (error) {
            f7.dialog.close();
            toast
              .get()
              .setToastText(error?.response?.data || error?.message)
              .openToast();
          }
        }}
        validateOnMount={true}
      >

Yup을 사용한 스키마 유효성 검사

const SignUpSchema = Yup.object().shape({
  name: Yup.string().required("필수 입력사항 입니다"),
  email: Yup.string().email().required("필수 입력사항 입니다"),
  password: Yup.string()
    .min(4, "길이가 너무 짧습니다")
    .max(50, "길이가 너무 깁니다")
    .required("필수 입력사항 입니다"),
  password_confirmation: Yup.string()
    .oneOf([Yup.ref("password"), null], "비밀번호가 일치하지 않습니다.")
    .required("필수 입력사항 입니다"),
});