react hook form의 대해서 깊게 알아보자 ! (feat. register, errors, resetfield, handleSubmit)

안녕하세요 ! 

저번 글에 이어서 이번엔 react-hook-form를 좀 더 깊게 알아보는 시간을 가지려고 합니다 !! 

 

먼저 useForm에 대해서 더 알아보겠습니다 ! 

const {
    register, handleSubmit, formState: { errors }, reset, resetField,
  } = useForm();

 

useForm에는 위에 말고도 더 많은 함수들이 존재합니다 !!! 

( 공식홈페이지 : https://react-hook-form.com/api/useform ) 

register 사용법

 

register을 사용하면 입력하거나 요소를 선택하고 react hook form에 validation을 적용할 수 있습니다. 

validation은 모두 HTML 표준을 기반으로 하며 사용자 지정 validation도 허용합니다.

 

먼저 register을 콘솔로 봐봅시다 ! 

console.log(register("username"));

이런식으로 나옵니다 !! 

 

그럼 한번 input창을 봐볼까요?

      <input
        className="bg-yellow-200"
        {...register("username", {
          required: true,
          minLength: 5
        })}
        type="text"
        placeholder="Username"
      />

...register을 쓰는 이유는

name="username"
value = { username };
onChange = { onChange };

이것과 똑같기 때문입니다 ! 즉 !! ...register 한문장으로 인해서 저렇게 바로 딱 !! 

또한 required와 minLength도 줄 수 있으며 더 다양한 옵션을 줄 수도 있으며 간단하게 custom도 가능합니다 ! 

        <input
          className="bg-yellow-200"
          {...register("username", {
            required: "이름을 입력해주세요",
            minLength: {
              message: "5글자 이상 입력하세요",
              value: 5,
            },
          })}
          type="text"
          placeholder="Username"
        />
        {errors.username?.message}

바로 저런식으로 입력도 가능합니다 !!! 

 

화면에서 봐볼까요? 

저렇게 나옵니다 !! 훨씬 사용하기도 간편하고 쉽습니다 !!! 

그럼 여기서 마지막에 errors가 어디서 왔냐라고 의문이 가시는 분들 ! 잘봤습니다 ! 바로 알아보겠습니당 !! 

 

 

formState: {errors} 사용법

먼저 콘솔로 봐볼까요??? 

console.log(errors);

처음에는 {} 이렇게 아무것도 없다고 생성하기 버튼을 눌러주면 밑에처럼 error에 대한 내용이 나옵니다.

바로 저희가 register에서 등록한 custom한 내용이 나옵니다 ! 

그래서 !! 저 내용을 바탕으로 

{errors.username?.message}

이런식으로 표기하여 해당 form에 에러가 있으면 표시 할 수 있도록 할 수 있습니다 ! 

 

그럼 마지막으로 handleSubmit에 대해서 알아보겠습니다 ! 

 

 

handleSubmit 사용법

handleSubmit은 form을 submit 할 때 데이터를 핸들링 해주는 함수입니다 ! 

즉 ! form의 validation을 해서 올바르면 데이터를 넘기고 올바르지 않으면 error를 나타냅니다 !! 

그래서 저 위에서도 handleSubmit에 걸려서 submit이 되지 않았습니다 ! 

 

먼저 사용해보겠습니다 ! 

handleSubmit는 onValid, onInvalid 2개의 인자가 필요합니다 !!! ( onInvalid는 필수는 아닙니다 ! ) 

 

 const onValid = (data: LoginForm) => {
    console.log("성공");
    console.log(data);
  };
  const onInvalid = (errors: FieldErrors) => {
    console.log("실패");
    console.log(errors);
  };
  
   return (
      <form className="mt-10" onSubmit={handleSubmit(onValid, onInvalid)}>
      ...
      ...
      ...
      </form>
    )

위에처럼 onValid, onInvalid를 해줬습니다 !! ( 참고로 data, errors를 써서 내용들도 볼 수 있습니다 ! )

 

먼저 아래 그림은 onInvalid인 경우입니다. 

아래 그림은 onValid인 경우 입니다.

 

이렇게 해서 성공 했을 때, 실패 했을 때 ! 를 정해서 따로 이벤트 처리를 해줘서 사용해도 괜찮습니다 !! 

 

** Tip을 드리자면 ! 만약 패스워드가 이상하거나 유저이름이 중복되는것이 있다면 ?? 

resetField를 써주면 됩니다 ! 밑에처럼요 ! ( 전부다 할경우는 reset로 할 수 있습니다 ) 

  const onInvalid = (errors: FieldErrors) => {
    console.log("실패");
    console.log(errors);
    resetField("password");
  };

 

정리 

정말 대단하지 않습니까???

저번글을 보면 정말 form에서 validation검사를 직접 만들려면 정말 길어지는 코드와

실수도 할 수 있으며, 생각할게 너무너무 많았는데....

react hook form을 이용하면 단순히 몇 줄만으로도 저렇게 간단하고 강력한 validation을 검사를 할 수 있다니 !!! 

여러분들도 손쉽게 form을 validation을 해봅시다 !!!