React Hook Form 회원가입 유효성 체크

📌 React Hook Form

 

모듈 다운 받기
npm install react-hook-form --save

 

useForm import하기
import { UseForm } from 'react-hook-form'

 

---

register()

const { register } = useForm();
{...register("email")}

input 태그 안에 register 함수를 spread해서 넣어줄 수 있다 (ES6 문법)

 

watch()

const { watch } = useForm();
console.log(watch('email'))`

watch()

지정된 input을 관찰하고 해당 값을 반환한다. 관찰 하려는 input 요소에 register를 등록해준다.

*버전 7부터 변경됨 : ref={register} => {...register("email")}

콘솔을 확인하면 입력시킨 input에 타이핑되는 값이 watch로 표기가 되는것을 확인할 수 있다.

 

handleSubmit()

const { handleSubmit } = useForm();
const onValid = (data) => {
        console.log(data);
    }
<form onSubmit={handleSubmit(onValid)}>
...

handleSubmit은 React Hook Form에서 Submit을 관리하기 위해 만든 함수이다.
react hook form이 모든 validation을 마쳤을때 호출된다.

handleSubmit은 함수를 인자로 받으며 그 함수에 data라는 인자를 넘겨준다. 한번에 관리할 수 있어서 편리하다.

 

 

---

validation 체크하기

required는 input태그에서 사용하는 속성이다. 필수 입력 사항에는 required속성을 사용한다.

 

유효성 체크의 조건 넣기

<input
type="text"
id="email"
{...register("email",
    {
    required: true,
    pattern: {
            value: /\S+@\S+\.\S+/,
            message: "이메일 형식에 맞지 않습니다."}
    	})
 	 } 
 />

[유효성 검사 속성]
required : 반드시 입력해야 하는지 체크
min : 입력에 허용되는 최소 값
max : 입력에 허용되는 최대 값
minLength : 입력에 허용되는 최소 길이
maxLength : 입력에 허용되는 최대 길이
pattern : 입력에 대한 정규식 패턴
validate: 콜백 함수를 인수로 전달하거나 콜백 함수의 객체를 전달하여 검증

 

유효성 체크 시 에러문구 설정

const { formState: { errors } } = useForm();
return (
    <div>
        <form onSubmit={handleSubmit(onSubmit)}>
            <label htmlFor="email">이메일</label>
            <input
                ...
            {errors.email && errors.email.type === "required" && <p>this email field is required</p>}
            {errors.email && errors.email.type === "pattern" && <p>올바른 이메일을 입력하세요</p>}

errors.email: error.email의 유효성 체크에 걸렸다면? : erros 렌더링 해주기
errors.email.type === "required": type이 required인 error.email

 

 

혹은 이르케 할 쑤이쑴

 

                        <input type="text"
                            className="useremail"
                            placeholder="이메일"
                            {...register("email", {
                                required: true,
                                pattern: {
                                    value: /\S+@\S+\.\S+/,
                                    message: '올바른 형식을 입력하세요.'
                                }
                            })}
                        />
                        {errors.email?.type === "required" && <p>이메일을 입력해 주세요.</p>}
                        {errors.email?.type === "pattern" && errors.email.message}

<span>{errors?.Email?.message}</span> :? : undefined여도 실행하기 (not required)

 

이메일 안에 아무것도 없을 수 있으므로 ?를 넣어준다.
제출하고 에러가 있을 떼 react-hook이 검사를 통해 에러를 출력한다.

에러 메세지는, 먼저 객체안에 넣어놓고 &&연산자 뒤에 message로 불러온다. 

 

 

 

ErrorMessage 컴포넌트

npm install @hookform/error-message
유효성 검사에 ErrorMessage를 추가할 수 있다.

 

  <label>gender</label>
  <select name="gender" id="gender"
      {...register("gender", {
          required: true
      })}
  >
      <option value="">select...</option>
      <option value="male">male</option>
      <option value="female">female</option>
  </select>

  <ErrorMessage
      errors={errors}
      name="gender"
      render={({ message }) => <p>{message} 성별을 선택하세요</p>}
  />

 

---

 

전체 코드 확인하기

import { useForm } from 'react-hook-form'
import { ErrorMessage } from '@hookform/error-message'

export default function Signup2() {


    const { register, formState: { errors }, handleSubmit } = useForm();
    const onSubmit = data => console.log(data.required);

    // 필수입력사항에는 required속성을 사용
    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)}>
                <label htmlFor="email">이메일</label>
                <input
                    type="text"
                    id="email"
                    {...register("email",
                        {
                            required: true,
                            pattern: /\S+@\S+\.\S+/
                            // pattern: {
                            //     value: /\S+@\S+\.\S+/,
                            //     message: "이메일 형식에 맞지 않습니다.",
                            // },
                        })
                    } />
                {errors.email && errors.email.type === "required" && <p>this email field is required</p>}
                {errors.email && errors.email.type === "pattern" && <p>올바른 이메일을 입력하세요</p>}
                {/* email의 유효성 체크에 걸렸다면? erros 렌더링 해주기 
                    유효성 type이 require라면 
                */}

                <label htmlFor="name">이름</label>
                <input type="text"
                    id="name"
                    {...register("name",
                        {
                            required: true,
                            maxLength: 10
                        })
                    } />
                {errors.name && errors.name.type === "required" && <p>this name field is required</p>}
                {errors.name && errors.name.type === "maxLength" && <p>your input exceed maximun length</p>}

                <label htmlFor="pw">비밀번호</label>
                <input type="password"
                    id="pw"
                    {...register("pw",
                        {
                            required: true,
                            minLength: 8
                        })} />
                {errors.pw && errors.pw.type === "required" && <p>this email field is required</p>}
                {errors.pw && errors.pw.type === "minLength" && <p>your input exceed minLength length</p>}



                <label htmlFor="pwComfirm">비밀번호 확인</label>
                <input type="password"
                    id="pwComfirm"
                    {...register("pwComfirm")} />



                <label>gender</label>
                <select name="gender" id="gender"
                    {...register("gender", {
                        required: true
                    })}
                >
                    <option value="">select...</option>
                    <option value="male">male</option>
                    <option value="female">female</option>
                </select>

                <ErrorMessage
                    errors={errors}
                    name="gender"
                    render={({ message }) => <p>{message} 성별을 선택하세요</p>}
                />


                <button type="submit">계정생성</button>
            </form>

        </div>
    )
}