회원가입, 로그인 폼 만들기(validation 유효성 체크, React Hook Form)

 

구현목록

- React Hook Form를 사용해서 회원가입 폼 개선(유효성 검사 속성 및 에러메세지 추가)

 

React Hook Form이란?

React에서 Form을 쉽게 만들기 위해 사용하는 라이브러리.

✔️ 기존의 폼에서 입력해야하는 여러가지 번거로운 작업을 줄여준다.(value설정, 데이터 전송 관리 등)

✔️ 타입스크립트로 작성된 라이브러리로, 타입스크립트와 아주 잘 맞는다.

✔️ 사용하기 쉬운 유효성 검사, 적은 코드

 

결과

이메일, 비밀번호를 필수값으로 지정

이메일 - 패턴값 지정, 비밀번호 - minLength로 4글자 이상으로 지정

 

과정

 

1️⃣ React Hook Form 설치

npm install react-hook-form

 

2️⃣ useForm 불러오기(react-hook-form에서 제공하는 여러가는 hook 중 하나, 우리가 사용하고자 하는 대부분의 기능이 이 hook에서 나온다고 함)

 

3️⃣ useForm 기능 사용하기

useForm 중에서도 register, handleSubmit, watch, formState 사용

 

Register : input값을 불러오기 위한 함수

 

{...register("사용하고 싶은 이름") } 이라고 적어두면 나중에 적은 이름으로 값을 불러올 수 있다.

두번째 인자에 유효성 검사 적용. 다양한 옵션을 설정해서 validation을 수행하는 기준값을 설정할 수 있다.

 {...register("email", {
	            required: "이메일은 필수 값입니다.",
	            pattern: {
	              value: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/i,
	              message: "올바른 이메일 형식으로 작성해주세요",
	            },
	          })}

 {...register("password", {
	            required: "비밀번호는 필수 값입니다.",
	            minLength: {
	              value: 4,
	              message: "비밀번호는 4글자 이상이어야합니다",
	            },
	          })}

• required : 필수값 지정. true,false로 구분해도 되지만 문자열을 넣을 경우에는 에러메세지로 들어간다.
• pattern : 입력에 대한 정규식 패턴 지정. 입력값 형식 지정
• minLength : 입력 최소 길이 지정

⇒ 위의 유효성 검사를 통과하지 못했을때 errors 객체를 이용하여 에러 메세지를 보여줄 수 있다.

 

Watch : input 입력값을 실시간으로 확인하기 위한 함수

console.log(watch());

 

HandleSubmit : submit을 관리하기 위해 만든 함수

 

함수를 인자로 받으며, 그 함수에 data를 넘겨줌.

 <button onClick={handleSubmit(onSignIn)}>SignIn</button>

data ⇒ input 입력값

 

FormState: {errors} : 발생한 error값들이 formState 객체 안에 errors로 담겨져 있다.

 

해당 errors 객체를 이용해서 사용자들에게 표시.

<div className="errorMessage">
	          {errors.email?.type === "required" &&
	            "이메일을 필수 조건으로 입력하시길 바랍니다."}
	          {errors.email?.type === "pattern" && errors.email.message}
	        </div

 

 

⬇️ 최종 구현 코드

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

function Auth() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm({ mode: "onSubmit" });

  const onSignIn = (data: any) => {
    axios
      .post(
        "<http://localhost:1234/register>",
        {
          email: data.email,
          password: data.password,
        },
        { withCredentials: true }
      )
      .then((res) => {
        alert("회원가입 성공");
      })
      .catch((error: any) => {
        alert("형식을 확인해주세요");
        console.dir(error);
      });
  };

	return (
	    <>
	      <div>Auth</div>
	      <form
	        onSubmit={(e) => {
	          e.preventDefault();
	        }}
	      >
	        <input
	          {...register("email", {
	            required: "이메일은 필수 값입니다.",
	            pattern: {
	              value: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/i,
	              message: "올바른 이메일 형식으로 작성해주세요",
	            },
	          })}
	          placeholder="EMAIL"
	        />
	        <div className="errorMessage">
	          {errors.email?.type === "required" &&
	            "이메일을 필수 조건으로 입력하시길 바랍니다."}
	          {errors.email?.type === "pattern" && errors.email.message}
	        </div>
	        <input
	          {...register("password", {
	            required: "비밀번호는 필수 값입니다.",
	            minLength: {
	              value: 4,
	              message: "비밀번호는 4글자 이상이어야합니다",
	            },
	          })}
	          placeholder="PW"
	        />
	        <div className="errorMessage">
	          {errors.password?.type === "required" &&
	            "비밀번호를 필수 조건으로 입력하시길 바랍니다."}
	          {errors.password?.type === "minLength" && errors.password.message}
	        </div>
	        <button onClick={handleSubmit(onSignIn)}>SignIn</button>
	        <button onClick={handleSubmit(onLogin)}>Login</button>
	      </form>
	    </>
	  );
	}
	
export default Auth;

 

백엔드 코드에도 validation 체크해야함. 프론트에서는 언제든지 바꿀 수 있기 때문!

 

백엔드 프론트 보안도 항상 생각하자 !!

 

 

참고사이트

React Form Validation 폼태그 유효성 검증을 쉽게 도와주는 Formik 사용방법

[React] react-hook-form 사용 및 useForm - 1

[React] 커스텀 훅, useForm (섹시하게) 만들기

 

React Hook Form 베이직

[React] react-hook-form이란? / 사용법