22.09.11/TIL(react-hook-form)

1. 왜 react-hook-form인가요?

• 적은 코드로 더 좋은 퍼포먼스를 낼 수 있다.
• 다른 라이브러리 혹은 React에 비해 Re-render 수가 적다.
• Fast Mounting (로딩속도가 빠름)
• TS를 기본으로 지원함

2. react-hook-form 설치하기

yarn add react-hook-form

3. react-hook-from 사용하기

3-1 register

• register은 input에서 값을 불러오기 위한 함수로 다른 옵션을 이용하면 input의 유효성 검사도 쉽게 할 수 있다.
• List of validation rules supported
  • required
  • min
  • max
  • minLength
  • maxLength
  • pattern
  • validate

3-2 handleSubmit

• handleSubmit은 React Hook Form에서 Submit을 관리하기 위해 만든 함수이다.

3-3 코드 예제

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

//react-hook-form에서 불러오기
  const {
    register,
    setError, //에러메시지를 발생시킬 수 있음
    getValues, //인풋값을 가져올 수 있음
    formState: { errors, isDirty, isSubmitting },
    handleSubmit,
  } = useForm({ criteriaMode: "all", mode: "onChange" });

//setError 예제
//email 중복확인 성공했을 때 메시지 띄워주기
  useEffect(() => {
    if (checkEmail === true) {
      setError("email", { message: "사용 가능한 이메일입니다." });
    }
  }, [checkEmail]);

//제출하기
const onSubmit = async (data) => {
    await new Promise((r) => setTimeout(r, 300));

//if) data.email => email input 창의 값!!!

  };


//적용예제

//form 태그에 제출부분 달아주기
<form onSubmit={handleSubmit(onSubmit)}
//에러 메시지 띄워주는 부분
				{errors.email && <p>{errors.email.message}</p>}
          <input
            className="email"
            name="email"
            type="email"
            aria-invalid={
              !isDirty ? undefined : errors.email ? "true" : "false"
            }
            {...register("email", {

						//react-hook-form에서 onChange 함수를 사용하고 싶으면
            //register 안에서 사용해야 합니다!!
              onChange: () => onChangeEmail(),
						//필수 값인지 필수로 입력하지 않았을 경우의 에러메시지
              required: "이메일은 필수 입력입니다.",
              minLength: {
                value: 8,
                message: "이메일을 8자 이상 작성해주세요",
              },
              maxLength: {
                value: 30,
                message: "이메일을 30자 이하로 작성해주세요",
              },
              pattern: {
                value:
                  /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/,
                message: "이메일이 형식에 맞지 않습니다.",
              },
            })}
          />
				<OkBtn type="submit" disabled={isSubmitting}>
        OK
	      </OkBtn>