[포스코x코딩온] React Hook Form

React Hook Form

---

• https://react-hook-form.com/
• React 어플리케이션에서 폼을 쉽게 관리
• 폼의 상태 관리와 유효성 검사를 간단하게 만들어 줌

React Hook Form - performant, flexible and extensible form library

npm i react-hook-form

•  코드만 잘 읽어보자

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

export default function Form() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm();

  //handleSubmit : 두 개의 함수를 받는데 하나는 유효할때 실행되는 함수(필수), 
  //유효하지 않을 때 실행되는 함수(선택)
  const onValid = (data) => {
    console.log("data", data);
  };

  //onInvalid : 오류처리
  const onInvalid = (error) => {
    console.log("err", error);
  };

  //errors: 전체 오류 처리
  console.log("errors", errors);

  //watch()는 상태 계속 체크한다.(입력되는 값을 계속 체크한다.)
  //   console.log(watch());
  //   console.log(watch("password"));

  return (
    <>
      <form onSubmit={handleSubmit(onValid, onInvalid)}>
        {/* useForm안에  register를 통해 username, email, password가 저장이 된다. */}
        <input
          type="text"
          {...register("username", {
            required: "이름을 입력하세요",
            minLength: { message: "최소 2글자 이상 작성하세요", value: 2 },
          })}
          placeholder="username"
        />
        <div>{errors.username?.message}</div>
        {/* ? 는 있는지 확인하고 있으면 나오고 없으면 안나온다. */}
        <br />
        <input
          type="text"
          {...register("email", {
            required: "이메일을 입력하세요",
            validate: {
              useGmail: (value) => {
                return (
                  value.includes("gmail.com") || "gmail로만 가입 가능합니다."
                );
              },
            },
          })}
          placeholder="email"
        />
        <br />
        <div>{errors.email?.message}</div>
        <input type="text" {...register("password")} placeholder="password" />
        <br />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

• register: 입력 요소에 연결하기 위한 함수, 이 함수를 통해 입력 요소에 유효성 검사 규칙을 설정
• handleSubmit: 폼의 제출을 처리하기 위한 함수. 이 함수에 전달된 콜백은 유효성 검사를 통과한 데이터를 인자로 받아 실행
• watch: 특정 폼 필드의 값을 실시간으로 관찰하는 함수
• formState: 폼의 상태를 나타내는 객체( ex: errors, isValid, isDirty, isSubmitted 등의 상태를 포함)

---

실습 코드

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

export default function Form() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onValid = (data) => {
    console.log(data);
  };
  console.log("errors", errors);
  const isValidNumber = (value) => /^[0-9]+$/.test(value);

  return (
    <>
      <form onSubmit={handleSubmit(onValid)}>
        <input
          type="text"
          placeholder="이름"
          {...register("name", { required: "이름은 필수 항목입니다." })}
        />
        {errors.name?.message} <br />
        <input
          type="text"
          placeholder="나이"
          {...register("age", {
            validate: {
              useNum: (value) => {
                return (
                  isValidNumber(value) || "0 이상의 숫자만 입력 가능합니다."
                );
              },
            },
          })}
        />
        {errors.age?.message}
        <br />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

결과