[React] useForm 라이브러리란?

Intro

안녕하세요. 이번 시간에는 React useForm 라이브러리에 대해 간단히 정리해보려고 합니다. React mui 템플릿을 살펴보던 도중 useForm 라이브러리를 사용하는 부분을 처음 발견했거든요! :) 

 

UseForm?

useForm은 React에서 Form 관리를 간편하게 할 수 있도록 도와주는 라이브러리 중 하나입니다. React Hooks를 기반으로 동작합니다. useForm을 사용하면 상태 관리와 유효성 검사 등의 복잡한 폼 관련 작업을 간소화할 수 있어 개발자들이 폼을 더 빠르고 쉽게 작성할 수 있습니다. 이는 개발 생산성을 높이고 코드의 유지보수성을 향상시킵니다.

 

UseForm's function

• Form 상태 관리 : useForm 훅을 사용하여 폼의 상태를 관리할 수 있습니다. 이는 폼 필드의 값을 추적하고, 유효성 검사와 같은 작업에 사용됩니다.
• Form submit 관리: 폼의 제출을 처리하는 데 도움을 줍니다. onSubmit 핸들러를 설정하고, 유효성 검사를 통과한 후에만 제출을 허용하도록 할 수 있습니다.
• 유효성 검사: 폼 필드에 대한 유효성 검사를 쉽게 추가할 수 있습니다. 유효성 검사는 사용자가 폼을 제출하기 전에 입력한 값이 유효한지 확인하는 작업을 말합니다.
• Form 초기화: 초기화 버튼을 클릭하거나 다시 설정할 때 폼을 초기 상태로 되돌릴 수 있습니다.
• 외부 라이브러리 통합: useForm은 다른 외부 라이브러리와 통합할 수 있습니다. 예를 들어, Material UI 또는 Bootstrap과 같은 UI 라이브러리와 함께 사용할 수 있습니다.
  
  

Example

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

function App() {
  // useForm hook을 사용하여 폼 상태를 초기화합니다.
  const { register, handleSubmit, formState: { errors } } = useForm();

  // 폼 제출 시 실행될 함수
  const onSubmit = (data) => {
    console.log(data); // 폼 데이터 출력
  };

  return (
    <div>
      <h1>Signup Form</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label>Name:</label>
          {/* register 함수를 사용하여 각 필드를 등록합니다. */}
          <input type="text" {...register('name', { required: true })} />
          {/* 필드 유효성 검사 에러 출력 */}
          {errors.name && <span>Name is required</span>}
        </div>
        <div>
          <label>Email:</label>
          <input type="email" {...register('email', { required: true })} />
          {errors.email && <span>Email is required</span>}
        </div>
        <div>
          <label>Password:</label>
          <input type="password" {...register('password', { required: true, minLength: 6 })} />
          {errors.password && <span>Password is required (min length 6)</span>}
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

 

이 예제에서는 useForm 훅을 사용하여 간단한 회원가입 폼을 만들었습니다. register 함수를 사용하여 각 입력 필드를 등록하고, 필요에 따라 유효성 검사 규칙을 제공했습니다. handleSubmit 함수를 사용하여 폼 제출을 처리하고, 제출 시에는 지정된 onSubmit 함수가 호출됩니다. 유효성 검사 에러가 발생하면 해당 에러가 표시됩니다.