use-hook-form 예시 만들어 놓기

const schema = yup
  .object()
  .shape({
    userId: yup.string().required(),
    userPassword: yup.string().min(7).max(12).required(),
    userPasswordConfirm: yup
      .string()
      .oneOf([yup.ref('userPassword')], 'Passwords must match'),

    email: yup.string().email('Invalid email').required(),
  })
  .required();

interface SIGNUP_TYPE {
  userId: string;
  userPassword: string;
  userPasswordConfirm: string;
  email: string;
}

const INIT_SIGNUP: SIGNUP_TYPE = {
  userId: '',
  userPassword: '',
  userPasswordConfirm: '',
  email: '',
};


function Page(){

  const {
    register,
    handleSubmit,
    watch,
    formState: { isValid, isDirty, isSubmitting, errors },
  } = useForm<SIGNUP_TYPE>({
    // mode: 'onChange',
    defaultValues: INIT_SIGNUP,
    resolver: yupResolver(schema),
  });

  const onSubmit = (data: SIGNUP_TYPE) => console.log(data);

  return (
	 <form onSubmit={handleSubmit(onSubmit)}>
		<input           placeholder="비밀번호"
          regist={{
            ...register('userPassword', {
              required: true,
              minLength: 8,
            }),
          }} />

	...
  )

대략적으로 공식문서에 나와있는 내용대로 하기만 하면 됨.
솔직히 input만 커스텀하게 만들어 놔도 확실히 깔끔하게 페이지를 만들 수 있긴해서 좋네.

 

그런데, formik이 좀 더 편했던 것 같기도 하고... 흠....
일단 이번에는 use-hook-form으로 간다!!!