SignUp - react hook form과 유효성 검사

회원가입 시 구글, 카카오, 네이버 API를 가져오는 것은 마무리 했고 이제는 유효성 검사와 중복확인 로직을 구현할 차례이다.
유효성 검사는 리액트에서 자주 사용하는 react-hook-form을 활용하였다.

기본 속성 참고
https://www.notion.so/Sign-up-js-1702cfe07323808289f3dfff74175c8d

설치

npm install react-hook-form

import { useForm } from 'react-hook-form';
const { register, handleSubmit, formState: { errors } } = useForm({ mode: 'onChange' });

먼저 상단에 해당 패키지를 선언한 후에 아래에 사용할 기능을 작성한다.
여기서 useForm 안에 onChange를 작성하면 실시간 유효성 검사가 가능하다.

<form onSubmit={handleSubmit(onSubmit)} id='form_sign_up' method='post'> 

폼 태그 안에 onSubmit 이벤트로 위에 선언한 handleSubmit 함수를 작성한 후 인자로 들어갈 onSubmit 로직을 작성한다.

const onSubmit = async (e) => {
   console.log(e);
  };

닉네임 조건 : 영문으로만 작성하며 4글자 이상 12글자 이하로 작성할 것

여기서 정규식을 조금만 살펴보자!

 startsWithLetter: (value) =>
              /^[a-zA-Z]/.test(value) || "Nickname must start

첫번째 문자가 영문자가 아니면 뒤의 메세지 출력
여기서 원래 ||(or) 연산자는 두 가지 식 중 하나 이상 충족 시 true를 반환하는데 첫번째 조건만 충족하여도 true를 반환하기 때문에 뒤의 식은 생략해서 작성한다.

추가 지식
&& -> 첫번째 조건이 충족하지 않으면 false 반환
?? -> null 또는 undefined일 시 오른쪽 값 반환

validFormat: (value) =>
              /^[a-zA-Z][a-zA-Z0-9_]{3,11}$/.test(value) ||
                      "Enter 4-12 characters, including letters, numbers, and “_”",

^[ ] :괄호 안의 조건이 아닐때 즉 Not을 뜻함
{3,11} : 4글자 이상 12글자 이하
$ : 문자열의 끝, 여기에선 전체가 앞의 조건이어야 한다는 뜻

중복확인은 다음페이지에서 계속 ~