React-Hook-Form으로 효율적으로 form 관리하자~!

안녕하세요 오늘은 React-Hook-Form에 대해서 소개해드릴 것인데요 

저는 요즘 로그인, 회원가입 페이지를 구현하면서 어떻게하면 효율적으로 form을 관리할 수 있을지 고민이 많았습니다

그래서 블로그를 살펴보다가 React-Hook-Form 라이브러리에 대해서 알게 되어 이렇게 글을 적게 되었습니다

---

React-Hook-Form이란?

React-Hook-Form 라이브러리는 사용하기 쉬운 유효성 검사 기능을 가지고 있고 확장가능한 form을 제공합니다

이 라이브러리를 사용하면 코드가 매우 줄어들고 불필요한 렌더링을 제거해서 성능도 개선이 되는 효과가 있습니다

---

🎯 사용법 

저는 기본적으로 React-Hook-Form 사용에 필요한 register함수와 handleSubmit함수를 소개드리고 오류처리, 유효성 검사, 중복 방지 기능들을 포함한 코드를 보여드리면서 소개 해드리겠습니다 

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

export function loginExample() {
  const {
    register,
    handleSubmit,
    formState: { isSubmitting, errors },
  } = useForm({
    mode: "onChange", // 입력 값이 변경될 때마다 유효성 검사 수행
  });

  return (
    <form
      onSubmit={handleSubmit((data) => {
        alert(JSON.stringify(data)); // 유효성 검사를 통과한다면 수행
      })}
    >
      <label htmlFor="email">이메일</label>
      <input
        type="text"
        id="email"
        placeholder="이메일을 입력해주세요"
        {...register("email", {
          required: "이메일은 필수 입력입니다.",
          pattern: {
            value: /\S+@\S+\.\S+/,
            message: "이메일 형식에 맞지 않습니다.",
          },
        })}
      />
      {errors.email && <div>{errors.email.message}</div>}

      <label htmlFor="password">비밀번호</label>
      <input
        type="password"
        id="password"
        placeholder="비밀번호를 입력해주세요"
        {...register("password", {
          required: "비밀번호는 필수 입력입니다.",
          minLength: {
            value: 8,
            message: "8자리 이상 비밀번호를 사용하세요.",
          },
        })}
      />
      {errors.password && <div>{errors.password.message}</div>}

      <button type="submit" disabled={isSubmitting}>
        로그인
      </button>
    </form>
  );
}

가장 먼저 훅함수인 useForm을 부르고 객체로 부터 필요한 객체나 함수를 받을 수 있습니다

register:입력 필드를 react-hook-form의 상태관리에 연결해주는 함수입니다 (필수파라미터: key값, optional: 유효성 검사)

handleSubmit: 폼 제출을 관리할 때 사용하는 함수입니다

 

그리고 이제 기능들을 설명하기 전에 formState 객체가 뭘 의미하는지 알려드리겠습니다

formState는 폼의 현재 상태를 나타내는 객체로, 유효성 검사 결과와 같은 폼과 관련된 다양한 상태를 제공해줍니다

 

자 이제 기본적인 것을 배웠으니 에러처리를 하는 법에 대해서 알려드리겠습니다 

유효성 검사는 위에 보이다시피 register함수의 두번째 매개변수로 넣어주면 됩니다 
그리고나서 formState에서 errors라는 객체를 불러와서 사용합니다

만약 사용자가 입력한 것들이 유효성 검사를 통과하지 못하면 에러 메시지를 보여줄 수 있습니다

 

그리고 저기 보이는 isSubmitting 객체는 제출중인지 알려주는 객체입니다
React-Hook-Form은 워낙 속도가 빨라서 분간이 가질 않아 중복제출방지를 해주는 것이 좋다고 합니다

---

✨ 글을 마치며

이렇게 간단하게 React-Hook-Form이라는 좋은 라이브러리를 사용해서 좋은 방법으로 form 관리를 할 수 있게 되어 정말 좋았습니다
아직 제가 설명 드리지 못한 더 좋은 기능들이 많이 있으니 React-Hook-Form의 공식 문서를 살펴보시면 좋을 것 같습니다

https://www.react-hook-form.com/