[React] react-hook-form + TypeScript

• React Hook Form은 React 기반의 폼 관리 라이브러리로, 폼 상태와 유효성 검사를 처리하기 위한 간편한 방법을 제공한다.
• 폼 요소의 값이나 상태 변경에 대한 이벤트를 관리하기 위해 명시적인 이벤트 핸들러를 작성할 필요 없이, 단순히 Hook(useForm, useController, useWatch...)을 사용하여 관련 데이터를 추적하고 업데이트할 수 있다.

• useForm: useForm은 React Hook Form의 핵심 함수로, 폼의 인스턴스를 생성하고 폼 데이터와 메서드를 제공합니다.
• register: register 함수는 입력 필드를 React Hook Form에 등록합니다. 입력 필드에 대한 유효성 검사 규칙, 기본값 등을 설정할 수 있습니다.
• handleSubmit: handleSubmit 함수는 폼 제출 시 실행할 함수를 정의합니다. 이 함수는 유효성 검사를 수행하고, 제출할 데이터를 처리하는 로직을 작성할 수 있습니다.
• errors: errors 객체는 유효성 검사 실패 시 해당 필드의 에러 메시지를 포함합니다.

간단 예시

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

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

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="firstName" ref={register({ required: true })} />
      {errors.firstName && <span>First name is required.</span>}

      <input type="text" name="lastName" ref={register({ required: true })} />
      {errors.lastName && <span>Last name is required.</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

위의 예시에서는 useForm 훅을 사용하여 폼 인스턴스를 생성합니다. register 함수를 사용하여 각 입력 필드를 등록하고, 유효성 검사 규칙을 설정합니다. handleSubmit 함수를 사용하여 폼 제출 시 실행할 함수를 정의하고, onSubmit 함수를 해당 함수로 전달합니다.

입력 필드에 대한 유효성 검사 규칙은 register 함수의 인자로 전달됩니다. 예시에서는 각 필드가 필수(required)인지를 검사하도록 설정하였습니다. 유효성 검사 실패 시 errors 객체에 해당 필드의 에러 메시지가 포함되며, 이를 활용하여 에러 메시지를 표시할 수 있습니다.

폼 제출 시 onSubmit 함수가 실행되며, 해당 함수에서는 제출할 데이터를 처리하거나 API 호출 등의 로직을 작성할 수 있습니다. 이 예시에서는 단순히 제출한 데이터를 콘솔에 출력하도록 했습니다.

"use client"

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

type Inputs = {
  id: string;
  password: string;
}

export default function Page(){
  const {register, handleSubmit, formState: { errors }} = useForm<Inputs>();

  const onSubmit:SubmitHandler<Inputs> = (data) => {
    console.log(data);}
  return (
    <form onSubmit= {handleSubmit(onSubmit)}>
      <input defaultValue="아이디" {...register("id")} />
      <input {...register("password", {required: true})} />
      {errors.password && <span>비밀번호를 입력해주세요.</span>}
      <input type="submit" />
    </form>
  );
};

register 함수의 첫 번째 매개변수로는 name 을 준다. 해당 필드를 다루게 될 key 값으로써 반드시 들어가야 하는 값이다 !
두 번째 값으론 options 객체가 들어가는데, 해당 객체에는 유효성 검사를 위한 프로퍼티들이 들어갈 수 있다. (required, min, max, minLength, maxLength, pattern 등..)

register("name", {required: true, minLength: 10});
register("name", {required: "해당 필드는 필수입니다.", minLength: {
  value: 3,
  message: "3글자 이상 입력해주세요."
}
});

유효성 검사를 위해 value 만을 줄수도 있지만, value, message 로 구성된 객체를 줌으로써 해당 에러에 대한 구체적인 메세지를 제공할 수도 있다.

watch

비제어 컴포넌트로 폼을 구현할 때 조건에 따라서 다르게 필드를 노출해야 하는 경우 watch 함수를 활용할 수 있다.
watch 함수는 폼에 입력된 값을 구독하여 실시간으로 체크할 수 있게 해주는 함수이다.

const {id, name, pwd, ...watch} = watch(); //전체 필드를 리턴

const id = watch("id");

매개변수를 주지 않는다면 전체 값을 관찰할 수 있으며 매개변수 (name) 를 준다면 해당 값만 관찰할 수 있다.

{watch("occupation") === "professor" ? (
  <Row>
    <Label>phone: </Label>
    <ControlInputText<IForm> control={control} name="phone" />
  </Row>
) : null
}

주의해야 할 점은, 만약 관찰하려는 필드에 defaultValue 를 주지 않는다면 초기 값이 undefined 로 관리가 된다.

Reset

해당 폼으로 create 기능 뿐만 아니라 edit 기능까지 커버해야 합니다. 사용자가 edit 버튼을 클릭해 정보를 수정해야 한다면, 우린 비동기 데이터를 활용해 기존의 데이터를 폼에 뿌려줘야 합니다.

이런 경우엔 reset 이라는 함수를 활용해 볼 수 있습니다.

---

참고자료)
https://tech.osci.kr/introduce-react-hook-form/