React Hook Form 예제

예제를 이용한 React Hook Form 기능 살펴보기

이미 존재하는 폼에 적용하기

• 이미 생성한 입력 요소에 대해서 register를 추가해주기

const Input = ({ label, register, required }) => (
  <>
    <label>{label}</label>
    <input {...register(label, { required })} />
  </>
);
(...)
  <form onSubmit={handleSubmit(onSubmit)}>
      <Input label="First Name" register={register} required />
    </form>

UI 라이브러리에 적용하기

• 외부 라이브러리를 같이 사용할 때, Controller 컴포넌트를 이용해야 함
• 여기서 render 함수는 리액트 요소를 반환하고 이벤트 및 값을 component에 연결합니다.

 <Controller
        name="iceCreamType"
        control={control}
        render={({ field }) => <Select 
          {...field} 
          options={[
            { value: "chocolate", label: "Chocolate" },
            { value: "strawberry", label: "Strawberry" },
            { value: "vanilla", label: "Vanilla" }
          ]} 
        />}
      />

전역 상태와 사용하기

• react-redux와 함께 상태 관리를 할 수 있음
• 여기서 connect는 리액트 앱의 하위 컴포넌트에서 redux store를 접근할 수 있게 해주는 함수임

import React from "react";
import { useForm } from "react-hook-form";
import { connect } from "react-redux";
import updateAction from "./actions";

export default function App(props) {
  const { register, handleSubmit, setValue } = useForm();
  // Submit your data into Redux store
  const onSubmit = data => props.updateAction(data);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Input {...register("firstName")} defaultValue={props.firstName} />
      <Input {...register("lastName")} defaultValue={props.lastName} />
      <input type="submit" />
    </form>
  );
}

// Connect your component with redux
connect(({ firstName, lastName }) => ({ firstName, lastName }), updateAction)(YourForm);

스키마 유효성 검사

• Joi, Yup, Superstruct을 활용해 스키마 기반의 폼 유효성 검사를 할 수 있음
• 먼저 yup을 설치해줌

npm install @hookform/resolvers yup

• 설치한 yup에 대해서 스키마를 설정해주고 설정해준 스키마를 useForm의 resolver에 할당해줌
• useForm의 resolver 에서 외부 유효성 검사 라이브러리를 사용할 수 있으며 라이브러리를 원활하게 통합할 수 있도록 할 수 있게 함.

import React from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from "yup";

const schema = yup.object().shape({
  firstName: yup.string().required(),
  age: yup.number().positive().integer().required(),
});

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <p>{errors.firstName?.message}</p>
        
      <input {...register("age")} />
      <p>{errors.age?.message}</p>
      
      <input type="submit" />
    </form>
  );
}