React Hook Form 사용법

React Hook Form : 공식 문서

react hook form 은 form 을 제어할 때에 쓰이면 효과적인 라이브러리이다.

사용하면서의 개인적인 소감은 ref나 객체로 만들어야 하는 후처리가 줄어들어 굉장히 좋은 경험을 했다.

유효성 검사나, onChange 시의 렌더링 횟수도 줄어 성능 측면에서 효과적이라고... 공식문서는 이야기 한다.

또한 TS도 기본적으로 지원한다고 한다

 

사용법

npm install react-hook-form
yarn add react-hook-form

 

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <select {...register("gender")}>
        <option value="female">female</option>
        <option value="male">male</option>
        <option value="other">other</option>
      </select>
      <input type="submit" />
    </form>
  );
}

위 예시에서는 firstName과 gender를 onSubmit 에서 데이터로 확인할 수 있다.

 

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true, maxLength: 20 })} />
      <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} />
      <input type="number" {...register("age", { min: 18, max: 99 })} />
      <input type="submit" />
    </form>
  );
}

위 예시에서는 유효성 검사에 대해 확인할 수 있다.

 

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

export default function App() {
  const { register, formState: { errors }, handleSubmit } = useForm();
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      {errors.firstName?.type === 'required' && "First name is required"}
      
      <input {...register("lastName", { required: true })} />
      {errors.lastName && "Last name is required"}
      
      <input type="submit" />
    </form>
  );
}

 

유효성에 통과하지 못하면 위처럼 밸리데이션 관리도 해줄 수 있다.