form 유효성검사에 react-hook-form 라이브러리 적용

728x90
반응형

회원가입시 이메일/패스워드/닉네임 유효성 검사로 사용

▶ 목적 :  state가 없어지면서 + 유효성 검사가 가능하여 컴포넌트의 랜더링 횟수를 최소화 시킨다

 

 

1) 패키지 설치 : yarn add react-hook-form

 

2) register, handleSubmit,  formState, watch 

const {
    register,
    handleSubmit,
    watch,
    formState: {errors},
    clearErrors,
  } = useForm({
    defaultValues: {
      email: '',
      password: '',
      nickname: '',
    },
    mode: 'onChange', //실시간 검증 활성화
  });

formState

▶ register 함수에 validation 넣어주고, formState객체의 error로 에러 정보 확인

▶에러가 없다면 빈 객체 

 

watch 

▶폼에 입력된 값을 실시간 체크해주는 함수

▶ defaultValue가 없다면 초기값이 undefined로 관리됨

 

 

 

3) 필수값 , 패턴 지정 + 오류메시지 출력

<div>
          <label title="아이디">
            <input
              {...register('email', {
                required: '아이디 입력은 필수입니다.',

                pattern: {
                  value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g,
                  message: '이메일 형식에 맞지 않습니다.',
                },
              })}
              type="email"
              placeholder="이메일 아이디*"
            ></input>
            <p>{errors.email?.message}</p>
          </label>
</div>

useForm을 통해서 form 객체를 구조분해할당 {...register (~~~}

▶ 첫번째 매개변수 : key 값 (반드시 들어가야함)

▶ 두번째 매개변수 : 유효성 검사 옵션 ( requiredminmaxminLengthmaxLengthpattern 등..)

 

 

 

 

4) 가입하기 버튼 클릭시 

<StFormData
        onSubmit={handleSubmit(data => {
          //event.preventDefault()-//;
          console.log('가입하기 버튼 클릭시 : ', data);
          // 유효성 검사를 다시 수행하도록 clearErrors를 호출합니다.
          clearErrors();

          signUp(data);
        })}
 >

▶ form 태그 이용시 preventDefault()로 새로고침을 방지했는데, 사용할 필요 없음

▶ handleSubmit 함수에  매개변수로 내가 정의한 onSubmit 함수 넣어주기

onSubmit 함수 : 매개변수로 data를 받는데,

사용자가 제출 버튼을 클릭한 후 내려오는 사용자 입장에서 최종으로 제출하는 데이터

 

▶ 서버에 데이터를 넘기기 전에, 해당 데이터에 대한 검증을 끝내야함!

 

 

 

 

 

참고

 

React Hook Form - performant, flexible and extensible form library

Performant, flexible and extensible forms with easy-to-use validation.

react-hook-form.com

 

끝.

 

 

반응형