react hook form으로 유효성 체크하기

📋 유효성 체크

폼의 유효성 검사를 하기 위해선 react-hook-form의 기본이 되는 register 내부에 등록하여 사용한다.

필수값 체크

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

const Login = () => {
    const {register, watch, handleSubmit} = useForm();

    const onValid = (data : any) => {
        console.log(data);
    }

  return (
    <form onSubmit={handleSubmit(onValid)}>
        <input
            placeholder="아이디"
            type="text"
            {...register("id", {
                required : true,
                minLength : 8
            })}
        />
        <input
            placeholder="비밀번호"
            type="password"
            {...register("pw", {
                required : true,
                minLength : 8
            })}
        />
        <button>제출</button>
    </form>
  )
}

위의 예시 코드는 아이디, 비밀번호 모두 필수값으로 입력하도록 작성된 코드이다.

유효하지 않은 항목이 있다면 해당 항목이 포커스되는 것을 확인할 수 있다.

그렇다면 input 태그의 required와 차이점은 뭘까?

input 태그의 required는 HTML 속성이기에 브라우저의 개발자 도구를 사용해 해당 속성을 제거함으로써 개발자의 의도와 다르게 진행될 수 있다.

이를 방지하기 위해 자바스크립트를 사용해 유효성 검사를 진행하는 것이다.

formState

폼 전체 양식 상태에 대한 정보가 포함되어 있어 관련 정보를 추적하는데 도움이 된다.

반환값은 종류가 다양하니 formState 공식문서를 참조하자.

const {formState} = useForm();

console.log(formState.errors);

유효성 검사 현황에 따라 발생한 오류를 추적할 수 있다.

정규식으로 유효성 검사하기

유효성 검사 방식 중 하나인 pattern으로 검사가 가능하다.

pattern은 정규식 패턴을 사용해 입력값의 유효성을 검사한다.

유효성 검사를 통과하지 못할 때 위 예시와 같이 formState의 erros를 통해 에러 메시지를 보여줄 수 있다.

<input
  placeholder="이메일"
  type="email"
  {...register("email", {
    required : "email is required",
    pattern : {
      value : /^[a-zA-Z0-9._%+-]+@naver.com$/,
      message : "email is not validate"
    }
  })}
/>

이메일 도메인의 형식을 맞추지 않아 에러가 발생함을 알 수 있다.

setError

onSubmit에서 최종 데이터 검증 시 에러가 발견 된다면 setError를 활용해 오류를 수동으로 설정할 수 있다.

인자는 아래와 같다.

인자	유형	설명
name	string	register 이름
error	{ type: string, message?: string, types: MultipleFieldErrors }	오류 유형, 메시지 설정
구성	{ shouldFocus?: boolean }	오류 발생 시 해당 레지스터로 커서 변경

const onValid = (data : IForm) => {
  if(data.pw !== data.pwChk) {
    setError("pwChk", {message : "pw are not same"}, {shouldFoucs : true});
  }
}

참고

노마드코더
react hook form 검사 속성
setError 공식문서