React Hook Form 베이직

유효성 검사 적용 및 에러 처리하기

• React Hook Form에서 유효성 검사 속성 및 에러 메세지 추가하기

• React Hook Form에서 검사 방식은 아래와 같습니다

• required : 반드시 입력해야 하는지 체크

• min : 입력에 허용되는 최소 값

• max : 입력에 허용되는 최대 값

• minLength : 입력에 허용되는 최소 길이

• maxLength : 입력에 허용되는 최대 길이

• pattern : 입력에 대한 정규식 패턴

• validate: 콜백 함수를 인수로 전달하거나 콜백 함수의 객체를 전달하여 검증

• 위의 유효성 검사를 통과하지 못할 때 useForm의 errors 객체를 이용하여 에러 메세지를 보여줄 수 있음

간단한 샘플을 아래와 같이 만들었습니다.

1. 기본 react 형태와 함께 useForm 함수로 register, formState, handleSubmit을 가져옵니다.

import "./styles.css";
import React from "react";
import { appendErrors, useForm } from "react-hook-form";

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

  return (
    <div className="App">
      <h1>React Hook Form</h1>
      <form className="formGroup">
        <input type="submit" />
      </form>
    </div>
  );
}

2. register로 요소를 등록하고 register 함수의 두 번째 인자에 유효성 검사를 적용합니다. 유효성 검사와 관련하여 value는 해당 유효성 검사 기준 값과 유효성 검사 실패 시, 보여줄 message를 할당합니다.

import "./styles.css";
import React from "react";
import { appendErrors, useForm } from "react-hook-form";

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

  return (
    <div className="App">
      <h1>React Hook Form</h1>
      <form className="formGroup" onSubmit={handleSubmit(onSubmit)}>
        <label for="firstname">이름</label>
        <input
          id="firstname"
          {...register("firstName", {
            required: true,
            maxLength: {
              value: 5,
              message: "이름은 5자 이하로 입력하여 주시길 바랍니다."
            }
          })}
        />
        <label for="lastName">성</label>
        <input
          id="lastName"
          {...register("lastName", {
            pattern: {
              value: /^[A-Za-z]+$/i,
              message: "문자열을 입력하여 주시길 바랍니다."
            }
          })}
        />
        <label for="age">나이</label>
        <input
          id="age"
          type="number"
          {...register("age", {
            min: { value: 18, message: "18살 이상여야 합니다." },
            max: { value: 99, message: "99살 이하여야 합니다." }
          })}
        />
        <input type="submit" />
      </form>
    </div>
  );
}```

3. 유효성 검사 실패 시 에러 메세지가 나타나는 데, type을 통해 유효성 검사 규칙을 확인하고 해당 에러가 발생 시,(참일 때) && 연산자를 이용하여  뒤에 message를 함께 표시합니다.

``` js
import "./styles.css";
import React from "react";
import { appendErrors, useForm } from "react-hook-form";

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

  return (
    <div className="App">
      <h1>React Hook Form</h1>
      <form className="formGroup" onSubmit={handleSubmit(onSubmit)}>
        <label for="firstname">이름</label>
        <input
          id="firstname"
          {...register("firstName", {
            required: true,
            maxLength: {
              value: 5,
              message: "이름은 5자 이하로 입력하여 주시길 바랍니다."
            }
          })}
        />
        <div className="errorMessage">
          {errors.firstName?.type === "required" &&
            "이름을 필수 조건으로 입력하시길 바랍니다."}
          {errors.firstName?.type === "maxLength" && errors.firstName.message}
        </div>
        <label for="lastName">성</label>
        <input
          id="lastName"
          {...register("lastName", {
            pattern: {
              value: /^[A-Za-z]+$/i,
              message: "문자열을 입력하여 주시길 바랍니다."
            }
          })}
        />
        <div className="errorMessage">
          {errors.lastName?.type === "pattern" && errors.lastName.message}
        </div>
        <label for="age">나이</label>
        <input
          id="age"
          type="number"
          {...register("age", {
            min: { value: 18, message: "18살 이상여야 합니다." },
            max: { value: 99, message: "99살 이하여야 합니다." }
          })}
        />
        <div className="errorMessage">
          {errors.age?.type === "min" && errors.age.message}
          {errors.age?.type === "max" && errors.age.message}
        </div>
        <input type="submit" />
      </form>
    </div>
  );
}