react-hook-form을 실시간 유효성 검사

react-hook-form

사용자 정보 입력 폼에서 사용자의 정보를 올바르게
작성했는지 실시간으로 확인하기 위해 react-hook-form
을 통해 쉽게 구현할 수 있다.

야놀자 사이트를 참고하면 사용자가 잘못된 정보를 입력하면 실시간으로 오류 메세지를 띄워준다.

사용자의 이름과 휴대폰 번호를 정규식을 통해 올바르게 작성했는지 확인할 수 있다.

이름은 한글 또는 영문자 2-16자 가능하며 휴대폰 번호는
010-1234-5678 (-제외도 가능) 형식으로 정규식을 만들면
다음과 같다.

한글 또는 영문자 2-16자 이하 : /^[가-힣a-zA-Z]{2,16}$/g
010-1234-5678(-제외) : /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/

➡️ 정규식 ?는 있어도 되고 없어도 된다는 뜻이다.

우선 사용자가 실시간으로 값을 입력할 때 바로바로
올바르게 작성했는지 확인하기 위해 onChange와 같은
속성이 필요하다.

💡useForm 속성에서 mode를 통해 이용할 수 있다.

mode 속성은 폼을 제출하기 이전에 유효한지 확인하는 용도로 그 중에서 onChange는 입력값이 변경될 때 마다 유효성 검사를 한다.

정규식과 일치한 문자열인지 확인할 때는 pattern
속성을 이용한다.

pattern : {value: 정규식, message: 사용자에게 보여줄 오류 메세지 }}

type UserInfo = { name: string; phone: string };

const ReservationForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors, isValid },
  } = useForm<UserInfo>({
    defaultValues: { name: '', phone: '' },
    mode: 'onChange',
  });

  return (
    <>
      <h3 className={styles.h3}>결제 정보</h3>
      <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
        <label htmlFor='userName'>예약자 명</label>
        <input
          type='text'
          id='userName'
          {...register('name', {
            required: '예약자 명을 입력해주세요',
            pattern: {
              value: NAME_REGEX,
              message: '예약자 이름은 2자이상 16자 이하만 가능합니다.',
            },
          })}
          placeholder='이름을 입력해주세요'
        />
        {errors.name && (
          <div className={styles.errors}>
            <p>{errors.name.message}</p>
          </div>
        )}
        <label htmlFor='phone'>연락처</label>
        <input
          type='text'
          id='phone'
          {...register('phone', {
            required: '휴대폰번호를 입력해주세요.',
            pattern: {
              value: PHONE_REGEX,
              message: '010-1234-5678 형식으로 입력해주세요',
            },
          })}
          placeholder='예시) 010-1234-5678'
        />
        {errors.phone && (
          <div className={styles.errors}>
            <p>{errors.phone.message}</p>
          </div>
        )}
      </form>
    </>
  );
};

export default ReservationForm;

➡️ 입력값을 변경 이벤트가 발생할 때 마다 실시간으로
오류 메세지를 보여준다.