[개발] react-hook-form - React 기반 form 라이브러리

react 기반의 form handling 을 위한 라이브러리인 react-hook-form을 공부해보았습니다.

form 구현을 쉽게 할 수 있도록 validation, 초기화 등의 기능들을 제공하고 있고 코드를 이해하는데 크게 어려움이 없습니다. 그리고 로딩 속도가 빠르다고 공식 사이트에 자랑을 하고 있네요.

아래는 소스 예제 입니다.

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

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

  const onValid = (data) => {
    console.log("[onvalid] ", data);
  };

  const onInvalid = (errors) => {
    console.log("[errors] ", errors);
  };

  return (
    <form onSubmit={handleSubmit(onValid, onInvalid)}>
      <label htmlFor="name">Name</label>
      <input
        id="name"
        {...register("name", {
          required: "필수 입력 값 입니다.",
          minLength: 5,
          maxLength: { value: 10, message: "최대 글자수 초과!" },
          validate: (value) => (value !== "admin" ? true : "admin 금지!")
        })}
      />
      {errors.name && errors.name.type === "required" && (
        <span>{errors.name.message}</span>
      )}
      {errors.name && errors.name.type === "maxLength" && (
        <span>Max length exceeded</span>
      )}
      <input type="submit" />
    </form>
  );
}

실행 결과

오류가 발생한 컴포넌트에 자동으로 커서 이동 등의 기본적인 기능 지원 외에도, 예제의 input 태그 내 register 함수를 이용하여 validation을 위한 조건 값을 지정 할 수 있습니다.

validation에서 오류 발생 시 onInvalid 함수가 호출되며, 정상 입력의 경우 onvalid 함수가 호출되며 각각의 함수에 필요한 코드 작성하면 됩니다.

input 태그의 기본 속성들을 추가하거나 에러 메시지를 지정할 수 있으며, 사용자 정의 함수를 추가하여 체크할 수도 있습니다.

 validate: (value) => (value !== "admin" ? true : "admin 금지!")

validate 를 통해 유효한 값이면 true를 리턴하고, 오류 일 경우 에러 메시지를 리턴 하면 oninvalid 에서 확인 가능합니다.

code sandbox