[React] react-hook-form 으로 input validation 하기

react-hook-form 을 사용해서 입력값들이 제대로 입력되지 않은 경우 error 처리를 어떻게 쉽게 할 수 있는 지 경험한 내용을 공유합니다.

회원가입이나 유저 세팅 페이지 등 정보들을 입력해서 서버에 제출하는 페이지들에서는 유저가 제대로 값들을 입력했는지 검증을 해줘야 한다. 클라이언트에 유저가 입력한 값들을 서버에 제출하기 전에 잘못된 값에 대한 error 문구를 띄워 다시 입력하게 유도한다면 서버에 잘못된 요청을 하지 않아도 되어 효율적이다.

Why do we need react-hook-form library?

error validation 을 직접 구현할 수는 있다. useState 로 입력값들을 상태로 관리해 상태가 변할때마다 validation 을 해줄수는 있다. 그렇지만 한 페이지에 여러개의 검증을 해야 하는 경우 state 관리가 힘들어지고 또 useState 특성상 state 값이 변할 때마다 컴포넌트가 rerender 되어 비용문제도 발생할 수 있다.

react-hook-form 은 이러한 불편함을 해결해주는 라이브러리이다.

https://react-hook-form.com/

react hook form image

내가 써보고 느낀 React-hook-form 의 장점

1. useRef 를 사용해 rerender 되지 않도록 해준다.
2. validate option 을 주고 (ex: required) 값들을 검증하여 error message 를 custom 하는 것까지 메소드들을 제공해준다.
3. watch 등 값들을 모니터링해주는 메소드들이 있어서 제대로 입력하였다는 등의 메세지를 주어야 할때도 편리하게 사용할 수 있다.

React-hook-form 으로 error validation 하기

회원가입 error validation

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

const SignUpComponent: React.FC<...> => (...) => {
... 
	const {
	    register,
	    handleSubmit,
	    getValues,
	    watch,
	    formState: { errors, dirtyFields },
	  } = useForm({
	    mode: "onSubmit",
	    reValidateMode: "onChange",
	    shouldFocusError: true,
	  });
		
  const watchTerms = watch("terms");

	  const isInvalidBirthday =
    getValues("year") === "default" ||
    getValues("month") === "default" ||
    getValues("day") === "default";

  const isInputValid =
    Object.keys(dirtyFields).length > 0 &&
    Object.keys(errors).length === 0 &&
    !isInvalidBirthday &&
    watchTerms === true;


const onSubmit = (data: FieldValues) => {...}


return (...
	<form className="w-300" onSubmit={handleSubmit(onSubmit)}>
      <TextInput
        label="Email"
        name="email"
        register={register}
        placeholder="Email here"
        options={{
          required: true,
          maxLength: {
            value: 50,
            message: "Max length of 50 is allowed",
          },
          pattern: {
            value: /^[a-zA-Z0-9+-_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]/,
            message: "email format is invalid",
          },
        }}
        editable={false}
        errors={errors.email}
      />
      {errors.email?.type === "required" && (
        <p className="text-red-500">Please write your email</p>
      )}
      <PasswordInput
        label="Password"
        name="password"
        register={register}
        placeholder="Password here"
        options={{
          required: true,
          minLength: { value: 8, message: "Minimum 8 letters" },
          pattern: {
            // 필수: 알파벳, 숫자 포함 옵션: 특수문자 포함 < > 제외
            value: /^(?=.*[0-9])(?=.*[a-zA-Z])[a-zA-Z0-9!@#$%^&*()]{8,}/,
            message: "both Alphabets and Numbers",
          },
        }}
        editable={false}
        errors={errors.password}
      />
      {getValues("password")?.length >= 8 && !errors.password && (
        <span className="text-green-500">
          V minimum 8 letters. V both Alphabet and number
        </span>
      )}
      <TextInput
        label="Username"
        name="nickname"
        register={register}
        placeholder="Username here"
        options={{
          required: true,
          maxLength: { value: 50, message: "maxLength is 50" },
        }}
        errors={errors.nickname}
      />
      <div className="mb-70">
        <div className="flex">
          <Select
            name="year"
            label="Year"
            register={register}
            options={generateNumberArray(1950, 2022)}
          />

          <Select
            name="month"
            label="Month"
            register={register}
            options={generateNumberArray(1, 12)}
          />

          <Select
            name="day"
            label="Day"
            register={register}
            options={generateNumberArray(1, 31)}
          />
        </div>

        {isInvalidBirthday && (
          <p className="text-red-500">Please select your birthday</p>
        )}
      </div>
      <span role="button" className="font-bold underline">
        Terms and conditions
      </span>
      <input type="checkbox" {...register("terms")} />
      {watchTerms === false && (
        <p className="text-red-500">
          Before you sign up, please check here.
        </p>
      )}

      <div className="block mt-20">
        <RoundButton
          width="w-200"
          height="h-56"
          type="submit"
          label="Sign up"
          disabled={!isInputValid}
        />
      </div>
    </form>

1. required 필수입력 해야 하는데 입력 안 된 경우

• options 에 required: true 주기
• formState errors 객체에 error 메세지 등 정보가 들어있다.

react hook form error

{errors.email?.type === "required" 
    && (<p className="text-red-500">Please write your email</p>
)}

이런식으로 유저에게 알려줄 수 있다.

2. minLength, maxLength

maxLength: {
            value: 50,
            message: "Max length of 50 is allowed",
          },

minLength: { value: 8, message: "Minimum 8 letters" }

options 에 줄 수 있고, Message 도 custom 할 수 있다.

3. 정규식 regex

pattern: {
  // 필수: 알파벳, 숫자 포함 옵션: 특수문자 포함 < > 제외
  value: /^(?=.*[0-9])(?=.*[a-zA-Z])[a-zA-Z0-9!@#$%^&*()]{8,}/,
  message: "both Alphabets and Numbers",
},