React-Hook_Form

React-Hook-Form (비제어 컴포넌트)

React 기반의 폼 관리 라이브러리로, 폼 상태 유효성 검사를 처리 방법

폼 요소의 값이나 상태 변경에 대한 이벤트를 관리하기 위해 이벤트 핸들러를 작성 할 필요 없이, hook(useForm,useController,useWatch..)을 사용해서 관련 데이터를 추적 및 업데이트를 할 수 있다.

장점

1. 간결한 API
   직관적인 API를 제공 폼 로직 단순화
2. 높은 성능
   입력 필드값의 변화를 추적해서 "상태" 대신 참조(reference)를 사용해서 불필요한 리렌더링을 방지한다.
3. 유효성 검사
   React-Hook_Form 내장 유효성 검사를 지원하며, Yup,Joi등의 외부 라이브러리와 통합 가능, 검사를 수행하고 에러 메세지를 표시할 수 있습니다.

주요개념

1. useForm
   React-Hook-Form의 핵심 함수, form 의 인스턴스를 생성하고 데이터와 메서드를 제공

2. register
   register 함수는 입력 필드를 React-Hook-Form 의 등록. 입력 필드에 대한 유효성 검사 규칙, 기본값 등을 설정

3. handleSubmit
   submit 함수 제출 시 실행할 함수를 정의, 이 함수는 유효성 검사를 수행하고, 데이터를 처리하는 로직을 작성할 수 있다.

4. error

mode,defaultValues

mode는 동작모드 설정 및 유효성 검사 방법을 지정

• onBlur(default) : 입력 필드가 포커스를 잃을 때 수행
• onChange : 입력 필드의 값이 변경될 때마다 유효성 검사 수행
• onSubmit : 폼 제출시에 유효성 검사

const { register, handleSubmit, setValue } = useForm({
  mode: "onChange",
  defaultValues: {
    fieldName1: "Default Value 1",
    fieldName2: "Default Value 2",
  },
});

resolver

비동기 유효성 검사를 수행하기 위해 사용

• resolver 는 폼 제출 시 실행되는 함수를 정의, 입력테이터를 인자로 받아서 비동기적으로 유효성 검사
• yupResolver를 이용해서 input 값들을 서버로 보내기전에 검증하는 과정을 거침
• schema 를 정의해서 스키마를 기반으로 정보 검증
• shape 속성을 사용해서 객체의 대한 검사 조건 설정

import React from "react";
import { useForm, Controller } from "react-hook-form";
import * as yup from "yup";

// Yup 스키마 정의
const schema = yup.object().shape({
  firstName: yup.string().required("First name is required"),
  lastName: yup.string().required("Last name is required"),
  email: yup
    .string()
    .email("Invalid email address")
    .required("Email is required"),
});

function MyForm() {
  const { control, handleSubmit, errors } = useForm({
    resolver: yupResolver(schema), // Yup Resolver를 사용하여 유효성 검사를 설정합니다.
  });

  const onSubmit = (data) => {
    // 유효성 검사를 통과한 데이터를 처리합니다.
    schema
      .validate(data)
      .then(() => {})
      .catch((error) => {});
  };
}

register

react-hook-form 에 입력요소를 등록하는데 사용됨.

• register 하는 과정을 통해 해당 input 값을 제어하고, 값을 수집, 유효성 검사를 실행(함수형태)
• params는 name 으로 해당 필드의 key값
• optional dms 유효성 검사를 위한 프로퍼티들을 넣을 수 있슴

<input
  type="text"
  {...register("email", {
    pattern: {
      value:
        /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i,
      message: "이메일 형식에 맞지 않습니다.",
    },
  })}
/>

register 와 Controller 비교

편의성, 유연성, 성능 면에서의 비교

1. Controller의 편의성:

외부 라이브러리와의 연동이 간편하며, 컴포넌트 간의 상태를 쉽게 전달할 수 있습니다.

2. Register의 편의성:

직접적인 등록으로 렌더링 효율이 높습니다.

3. 둘의 유연성:

Controller는 외부 라이브러리와의 통합에 유리하나, 사용자 정의 요소에 적용하기 어렵습니다.
Register는 직접적인 등록으로 자유도가 높으며, 사용자 정의 요소에 적용 가능합니다.

5. 성능 면에서의 차이:

큰 규모의 폼이나 동적인 상황에서 Controller는 렌더링 성능에 유리할 수 있습니다.
작은 규모의 폼에서는 Register가 직접적으로 등록되어 렌더링 성능이 우수할 수 있습니다.

Controller

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

const MyForm = () => {
  const { control, handleSubmit } = useForm();

  const onSubmit = (data) => {
    // 폼 제출 처리...
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Controller 함수를 사용하여 입력 요소 등록 */}
      <Controller
        name="username"
        control={control}
        render={({ field }) => <input {...field} />}
      />

      {/* 나머지 폼 요소들... */}
    </form>
  );
};

register

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

const MyForm = () => {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    // 폼 제출 처리...
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Register 함수를 사용하여 입력 요소 직접 등록 */}
      <input {...register("username")} />

      {/* 나머지 폼 요소들... */}
    </form>
  );
};