react hook form 유효성 검사

서론

현재 진행중인 프로젝트에서 react hook form을 통해 간단하게 유효성 검사를 만들어봤습니다.

 

본론

회원가입 모달

  /* useForm default 값 */ 
  const {
    register,
    handleSubmit,
    formState: { errors },
    watch,
  } = useForm<FieldValues>({
    defaultValues: {
      name: "",
      email: "",
      password: "",
      matchPassword: "",
      phone: "",
    },
  });
  
  /* 비밀번호 재확인시 필요 */
  const password = watch("password");
  
  /* 확인 */
  const onSubmit: SubmitHandler<FieldValues> = (data) => {
    const { name, email, password, matchPassword, phone } = data;
    signup({ name, email, password, matchPassword, phone });
    signupModal.onClose();
  };
  
  
  <Input
    id="password"
    label="Password"
    type="password"
    actionLabel="8~20 letter + number"
    register={register}
    errors={errors}
    required
  />
  <Input
    id="matchPassword"
    label="Password Confirmation"
    type="password"
    actionLabel="비밀번호가 일치하지 않습니다."
    register={register}
    errors={errors}
    required
    password={password}
  />

모달 부분이 복잡해서 간략하게 작성했습니다.

 

Input 컴포넌츠

  const isEmail = id === "email";

  const isPhone = id === "phone";

  const isPassword = id === "password";

  const isMatchPassword = id === "matchPassword";
  
  <input
    id={id}
    disabled={disabled}
    {...register(id, {
      required: required ? "This field is required" : false,
      ...(isEmail && {
        pattern: {
          /* email@email.com 형식 */
          value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
          message: "Invalid email address",
        },
      }),
      ...(isPhone && {
        pattern: {
        /* 하이픈(-) 없이 핸드폰번호 11자리 */
          value: /^(01[0-9]{1})[0-9]{3,4}[0-9]{4}$/i,
          message: "Invalid phone number",
        },
      }),
      ...(isPassword && {
        pattern: {
        /* 8~20 자리의 비밀번호 문자 + 숫자 */
          value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/,
          message:
            "Password must be 8-20 characters and include at least one letter and one number",
        },
      }),
      ...(isMatchPassword && {
        /* 위의 isPassword와 isMatchPassword의 value가 같아야함 */
        validate: (value: string) => (password === value ? true : false),
      }),
    })}
    type={type}
    className={`
      disabled:opacity-70
      disabled:cursor-not-allowed
      ${errors[id] ? "border-rose-500" : "border-neutral-300"}
      ${errors[id] ? "focus:border-rose-500" : "focus:border-black"}
    `}
  />

register에 submit된 값을 유효성 검사를 위해 해당 id값과 register에 key값을 맞춰야합니다.

pattern은 정규식만 가능하고 해당 패턴과 다르면 error를 보내줍니다. 사실 기존의 password와 confirm password를 맞추려고 정규식에 이렇게 저렇게 해보려다 실패해서 찾아봤는데 validate를 통해 해당 value값과 password을 비교해서 true, false를 반환합니다.
true일 때는 유효성 검사가 된 것이고, false일 때는 유효성 검사에 실패해서 error를 보내줍니다.

 

정리

컴포넌츠 한 곳에서 유효성 검사를 할 수 있어서 좋습니다.