react-hook-form

react-hook-form

react-hook-form은 공식문서의 설명으로
불필요한 리렌더링을 제거하면서 작성해야 하는 코드의 양을 줄여줍니다. 라고 적혀 있습니다.
위의 설명 처럼 react-hook-form은 입력form관련 렌더링을 최적화하며 작성해야하는 코드를 줄여줍니다.

사용법

react-hook-form의 기본적인 사용법은
useForm에서 register를 가져와 아래에 코드처럼 iuput안에 집어넣어 사용합니다.
handleSubmit으로 감싸서 onSubmit함수를 사용하고 인자에 data를 받을 수 있습니다.
이 data는 form안에 들어가 있는 데이터를 객체형식으로 가져옵니다.

import { useState } from "react";
import { useForm } from "react-hook-form";
import Header from "./Header";

export function App() {
  const { register, handleSubmit } = useForm();
  const [data, setData] = useState("");

  return (
    <form onSubmit={handleSubmit((data) => setData(JSON.stringify(data)))}>
      <Header />
      <input {...register("firstName")} placeholder="First name" />
      <select {...register("category", { required: true })}>
        <option value="">Select...</option>
        <option value="A">Option A</option>
        <option value="B">Option B</option>
      </select>
      <textarea {...register("aboutYou")} placeholder="About you" />
      <p>{data}</p>
      <input type="submit" />
    </form>
  );
}

typescript 및 validation 그리고 기타 기능

typescript로 작성을 하게 될 경우 타입을 작성하여 useForm에 제네릭으로 넣게 됩니다.
그리고 onSubmit함수를 작성할 때도 react-hook-form의 SubmitHandler를 타입으로 넣고제네릭을 넣어줘야 합니다.

useForm에 위에서 사용한 register, handleSubmit외에 제가 사용한 기능은

watch,formState,setValue가 있습니다.

watch: 작성한 값들을 볼 수 있는 함수입니다. ex) watch("email")이렇게 사용하고 console을 통해 입력이 바뀌는 것을 확인할 수 있습니다.
formState: vaildation을 할 경우 이거를 통해 폼상태를 확인할 수 있고, errors나 isValid같은 속성이 있습니다.
setValue는 useState의 set처럼 사용할 수 있습니다. useState와 다른점은 어떤 값을 바꿀지 선택을 해야 됩니다.

validation

vaiildaion은 register함수 안에 들어가고 validaition외에도 input의 일부 속정들도 들어갑니다.
아래의 코드처럼 register함수안에 객체형식으로 작성하고 제가 사용했던 validation은 required, pattern등이 있습니다.
pattern의 경우 정규식을 확인하는 속성입니다.

"use client";

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

type auth = {
  email: string;
  password: string;
};

export default function Home() {
  const { register, handleSubmit, watch, formState, setValue } = useForm<auth>({
    mode: "onChange",
  });

  useEffect(() => {
    setValue("email", "qube7089");
    setValue("password", "test");
  }, [setValue]);

  const eventHandler: SubmitHandler<auth> = (data) => {
    console.log(data.email);
    console.log(data.password);
  };

  return (
    <form onSubmit={handleSubmit(eventHandler)}>
      <div className="m-auto w-[200px] h-[200px] border border-solid border-black">
        <input
          {...register("email", {
            required: "필수 입력사항입니다.",
            pattern: {
              value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
              message: "이메일 형식으로 입력해주시기 바랍니다.",
            },
            value: "test",
          })}
          placeholder="email"
        />
        {formState.errors.email?.message && (
          <p>{formState.errors.email?.message}</p>
        )}
        <input
          {...register("password", { required: "필수 입력사항입니다." })}
        />
        <button
          type="submit"
          className={formState.isValid ? "bg-blue-500" : "bg-gray-300"}
        >
          로그인
        </button>
      </div>
    </form>
  );
}