[React]React Form vs React Hook Form

그냥 React-Form

• email, username을 입력하는 form.
• 각각의 input값을 useState로 관리하는 방법도 있겠지만 아래 예제에서는 formData라는 여러 폼 요소를 하나의 객체로 관리하는 방법을 택함.

import React, { useState } from 'react';

const Form = () => {
  const [formData, setFormData] = useState({ email: '', username: '' });
  const [errors, setErrors] = useState({ email: '', username: '' });
	// email 유효성 검사
  const validateEmail = (email) => {
    const pattern = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
    if (!email) {
      return "이메일을 입력해주세요.";
    } else if (!pattern.test(email)) {
      return "이메일 형식이 올바르지 않습니다.";
    } else {
      return "";
    }
  };

  const validateUsername = (username) => {
  const regex = /^[가-힣]+$/;
	// username 유효성 검사
  if (!email) {
    return "이름을 입력해주세요.";
  } else if (username.length < 3) {
    return "3글자 이상 입력해주세요.";
  } else {
    return "";
  }
};

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));

    if (name === 'email') {
      setErrors(prev => ({ ...prev, email: validateEmail(value) }));
    } else if (name === 'username') {
      setErrors(prev => ({ ...prev, username: validateUsername(value) }));
    }
  };

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

    const emailError = validateEmail(formData.email);
    const usernameError = validateUsername(formData.username);

    if (!emailError && !usernameError) {
      // 서버 form 제출 로직
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      {errors.email && <div>{errors.email}</div>}

      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      {errors.username && <div>{errors.username}</div>}

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

export default Form;

react-form-hook

• useState 필요없이 useForm 훅이 모든 상태 관리 작업을 자동으로 처리.
• register 함수를 사용하여 입력 요소를 쉽게 연결할 수 있음
• register 함수의 인자로 간단하게 유효성 검사 구현 가능.
• 규칙을 정의하여 간단한 유효성 검사를 수행
• 유효성을 만족하지 않을 때 발생하는 에러를 formState의 errors 객체를 통해 일괄적으로 감지하고 처리.

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

const Form = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
     // 서버 form 제출 로직 : 각 input의 모든 유효성 검사가 통과되어야 onSubmit이 실행된다.
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="email"
        {...register("email", {
          required: "이메일을 입력해주세요.",
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "이메일 형식이 올바르지 않습니다."
          }
        })}
      />
      {errors.email && <div>{errors.email.message}</div>}

      <input
        {...register("username", {
          required: "이름을 입력해주세요.",
          minLength: {
            value: 3,
            message: "3글자 이상 입력해주세요."
          }
        })}
      />
      {errors.username && <div>{errors.username.message}</div>}

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

export default Form;