{React Hook Form}

React Hook From이란?👀

React Hook Form은 React 기반의 폼 관리 라이브러리 중 하나로 ReactHooks를 사용하여 폼을 쉽게 관리하고 유효성 검사를 수행할 수 있도록 도와준다.

장점으로는 요래 있는데

• 적은 양의 코드로도 더 나은 성능을 얻을 수 있다.
• 불필요한 리렌더링을 최소화하여 성능을 향상시킬 수 있다.
• TypeScript를 기본으로 지원한다.
• 로딩 속도가 빠릇빠릇 하다.

(당연히 알고 있겠지만 ㅎ;) 폼(Form)은 웹 애플리케이션에서 사용자로부터 데이터를 입력받는 요소를 의미한다.
ex)input, button, checkbox, drop-down ...

React에서는 이러한 폼을 만들고 관리하기 위해 상태(State)와 이벤트 처리를 활용하는데, 이때 React Hook Form과 같은 라이브러리를 사용하면 편리하게 상태 및 이벤트 처리를 관리할 수 있다.

react 일반 폼

리액트에서 일반 폼을 작성하는 과정은 꽤 복잡할 수 있다.
각 input 값에 대한 상태 관리와 onChange 이벤트 처리를 해야하며, submit에는 다양한 유효성 검사 코드를 작성해야 한다. 사용자가 필수 사항을 올바르게 입력했는지, 양식에 맞게 작성했는지 등을 확인해야 한다...
또한, 유효성 검사에 실패했을 때 보여줄 에러 메시지를 관리하는 상태도 필요하다. 이 모든 과정을 거쳐야만 사용자 경험을 만족시키는 폼을 만들 수 있다.

아래는 리액트에서 간단한 이메일과 비밀번호를 입력받는 폼을 작성한 예시이다.

import React, { useState } from "react";

export default function Forms() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [emailError, setEmailError] = useState("");
  const [passwordError, setPasswordError] = useState("");
  const [formError, setFormError] = useState("");

  const handleEmailChange = (e) => {
    const { value } = e.currentTarget;
    setEmail(value);
    setEmailError("");
    setFormError("");
  };

  const handlePasswordChange = (e) => {
    const { value } = e.currentTarget;
    setPassword(value);
    setPasswordError("");
    setFormError("");
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!email || !password) {
      setFormError("이메일과 비밀번호는 필수 입력 사항입니다.");
    } else {
      if (!email.includes("@")) {
        setEmailError("유효한 이메일 주소를 입력해주세요.");
      }
      if (password.length < 8) {
        setPasswordError("비밀번호는 최소 8자 이상이어야 합니다.");
      }
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="이메일"
        value={email}
        onChange={handleEmailChange}
        required
      />
      {emailError && <div>{emailError}</div>}
      
      <input
        type="password"
        placeholder="비밀번호"
        value={password}
        onChange={handlePasswordChange}
        required
      />
      {passwordError && <div>{passwordError}</div>}
      
      <button type="submit">계정 생성</button>
      {formError && <div>{formError}</div>}
    </form>
  );
}

이 예시 코드는 간단한 이메일과 비밀번호 입력 폼을 구현한 것 인데 필요에 따라 CSS를 추가하거나 다른 유효성 검사 추가적인 기능을 구현하면 코드가 더욱 길고 복잡해질 수 있다😥😱

하지만 요런 귀차니즘을 해결할 react hook from을 사용해보자!😆

Get Start~!💥

우선 제일 중요한 react hook from 라이브러리를 설치한다.

npm install react-hook-form 
-------------------------------
yarn add react-hook-form

1.폼 생성

우선 기본적으로 React Hook Form을 사용하려면 useForm 훅을 사용하여 폼을 생성해야 한다.

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

export default function Forms() {
	const { register } = useForm();
  return (
    <form>
      <input
    	{...register("email")}
        type="email"
        placeholder="Email"
        required
      />
      <input
		{...register("password")}
        type="password"
        placeholder="Password"
        required
      />
      <input type="submit" value="Create Account" />
    </form>
  );
}

이렇게 하면 위에 일반 폼과 비교하면 useFrom을 이용하여 매우 길었던 state 코드를 줄일 수 있다.😋

다시 돌아와 다른 함수도 알아볼겸 또 다른 예시 코드를 살펴보면

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

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

  const onSubmit = (data) => {
    console.log(data); // 제출된 폼 데이터 출력
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 각 입력 필드에 register 함수를 사용하여 연결 */}
      <input {...register('firstName', { required: '이 필드는 필수입니다.' })} />
      {errors.firstName && <p>{errors.firstName.message}</p>}

      <input {...register('lastName')} />

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

2.입력 필드에 register 함수 적용

위에 사용된 register 함수를 사용하여 각 입력 필드를 폼과 연결한다.

Register 함수는 input의 값을 가져오기 위한 함수로, 다른 옵션을 사용하면 input의 유효성 검사도 간편하게 수행할 수 있다.
다음과 같이 {...register('사용할 이름', {'검증할 내용'})} 이라고 적어주면 나중에 적은 이름으로 값을 불러올 수 있다.

이때 입력 필드의 name 속성은 해당 입력 필드의 식별자 역할을 한다.

---

아래는 미리 위에 사용되는 함수들을 요약해 보았다.

• register : 폼들의 유효성을 확인하는 함수
• handleSubmit : 폼을 제출하기 위한 함수
• watch : 실시간으로 입력폼에 적힌 값을 확인하는 옵션
• formState : 폼의 상태 정보를 담고 있음.
  (주로 유효성 검사 에러, 폼 전송 여부, 입력값 등을 확인하는 데 사용)

3.Submit 이벤트 처리

폼 Submit 이벤트를 처리하기 위해 handleSubmit 함수를 사용한다. 이 함수는 Submit 버튼이 클릭되면 폼 데이터를 수집하고 등록된 onSubmit 함수를 호출한다.
위 예제에서는 단순히 폼 데이터를 콘솔에 출력하도록 되어 있다.

4.에러 처리 및 상태 관리

React Hook Form은 formState 객체를 통해 폼의 상태를 관리하는데 이 객체에는 다양한 속성이 포함되어 있지만, 이번 예시에는 errors 속성을 사용하여 유효성 검사 에러를 처리하는 방법을 알아보자.

위 코드를 보면

{errors.firstName && <p>{errors.firstName.message}</p>}:

이 부분은 firstName 필드에 대한 에러가 있을 경우 해당 에러 메시지를 출력한다. 이렇게 하면 사용자에게 유효성 검사 실패에 대한 정보를 제공할 수 있다.이렇게 유효성 검사 에러를 처리하고, 각 필드에 해당하는 에러 메시지를 출력할 수 있다.

참고로 맨위에 일반 폼에 사용된 이메일, 비밀번호 입력폼은

<input
    {...register('password', {
      required: '비밀번호를 입력해주세요.',
      minLength: {
        value: 8,
        message: '비밀번호는 8자 이상이어야 합니다.'
      }
    })}
    type="password"
  />
  {errors.password && <p>{errors.password.message}</p>}

요런식으로 나타낼 수 있다. 그 외에도 이메일 양식, 닉네임, 이름 등 여러 유효성 검사 하는게 있는데 react hook from을 통해 더 가독성있게 작성 할 수 있다.