양식 유효성 검사 단순화: React Hook 양식과 기존 방법 비교

양식 유효성 검사는 웹 개발의 중요한 측면으로, 데이터 무결성을 보장하고 사용자 경험을 향상시킵니다. React 생태계에서는 양식과 유효성 검사를 처리하는 방법이 크게 발전했습니다.

• 이 블로그에서는 전통적인 양식 유효성 검사와 최신 React Hook Form 라이브러리라는 두 가지 접근 방식을 비교해 보겠습니다.
• 이러한 방법을 나란히 살펴보면 React Hook Form이 많은 개발자에게 꼭 필요한 솔루션이 된 이유를 알게 될 것입니다.

React의 기존 형식 유효성 검사

• 먼저 React에서 양식 유효성 검사를 위한 전통적인 접근 방식을 살펴보겠습니다.

import React, { useState } from "react";

const SimpleForm = () => {

  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    // ... other fields
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

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

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    const newErrors = {};

    // Validation logic
    if (!formData.firstName) newErrors.firstName = "First Name is Required";

    if (!formData.lastName) newErrors.lastName = "Last Name is Required";

    if (!formData.email.match(/^\S+@\S+$/i)) newErrors.email = "Invalid email address";

    if (!formData.password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)) newErrors.password = "Invalid password";

    // ... more validation rules

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    // Submit form data
    try {
      const response = await simulateApiCall(formData);
      console.log("Success: ", response);
    } catch (error) {
      console.error(error);
      setError({ root: error.message });
    } finally {
      setIsSubmitting(false)
    }

  };

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

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

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


      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
      />
      {errors.password && <p>{errors.password}</p>}

      {/* More form fields */}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>
    </form>
  );
};

이러한 전통적인 접근 방식에서

• useState 후크를 사용하여 양식 상태와 오류 상태를 별도로 관리합니다.
• 양식 필드에 대한 변경 사항을 수동으로 처리하고 handlerSubmit 함수에 사용자 정의 유효성 검사 논리를 구현합니다.

이 작업은 작동하지만 상용구 코드가 많이 포함되어 더 큰 형식에서는 번거로울 수 있습니다.

React Hook 양식 입력

• 이제 React Hook Form을 사용하여 동일한 결과를 얻을 수 있는 방법을 살펴보겠습니다.

설치

npm install react-hook-form

import React from "react";

// useForm is the hook which is given by react-hook-form
import { useForm } from "react-hook-form";

const ReactHookForm = () => {

  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting },
  } = useForm();

  const onSubmit = (data) => {
    // Submit form data
    try {
      const response = await simulateApiCall(formData);
      console.log("Success: ", response);
    } catch (error) {
      console.error(error);
      setError({ root: error.message });
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("firstName", { required: "First Name is required" 
        })}
      />

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

      <input
        {...register("lastName", { required: "Last Name is required" 
        })}
      />

      {errors.lasttName && <p>{errors.lasttName.message}</p>}      

      <input
        {...register("email", {
          required: "Email is required",
          pattern: { value: /^\S+@\S+$/i, message: "Invalid email address" }
        })}
      />

      {errors.email && <p>{errors.email.message}</p>}

      <input
        {...register("password", { required: "First Name is required",
         pattern: { value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/, message: "Invalid password"}
        })}
      />

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

      {/* More form fields */}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>

    </form>
  );
};

React Hook 형태의 단순성

• 보일러플레이트 감소: React Hook Form을 사용하면 수동 상태 관리가 필요하지 않습니다. 더 이상 양식 데이터 및 오류에 대해 useState를 사용하지 않습니다.

• 선언적 유효성 검사: 명령형 유효성 검사 논리를 작성하는 대신 레지스터 함수에서 바로 유효성 검사 규칙을 선언합니다. 이렇게 하면 코드를 더 쉽게 읽을 수 있고 유지 관리할 수 있습니다.

• 자동 오류 처리: React Hook Form이 자동으로 오류를 추적하고 이를 오류 객체를 통해 제공하므로 수동으로 오류 상태를 관리할 필요가 없습니다.

• 성능: React Hook Form은 제어되지 않는 구성 요소를 활용하여 재렌더링을 최소화하여 특히 대규모 양식의 경우 더 나은 성능을 제공합니다.

• 쉬운 통합: 레지스터 기능은 기존 입력 요소와 원활하게 통합되므로 JSX에 대한 변경을 최소화할 수 있습니다.

• 내장 유효성 검사: 필수, 최소, 최대, 패턴과 같은 일반적인 유효성 검사 규칙이 내장되어 있어 사용자 정의 유효성 검사 기능의 필요성이 줄어듭니다.

• TypeScript 지원: React Hook Form은 기본적으로 탁월한 TypeScript 지원을 제공하여 양식의 유형 안전성을 향상시킵니다.

더 많은 입력 필드를 사용하여 TypeScript에서 React-Hook-Form을 처리하는 방법을 이해하려면

• React의 기존 양식 처리는 세밀한 제어를 제공하지만, 유지 관리가 어려울 수 있는 장황한 코드로 이어지는 경우가 많습니다.

• React Hook Form은 이 프로세스를 크게 단순화하여 양식 및 유효성 검사를 처리하는 보다 선언적이고 효율적인 방법을 제공합니다.

읽어주셔서 감사합니다... 오늘 새로운 것을 배우셨기를 바랍니다 :)

위 내용은 양식 유효성 검사 단순화: React Hook 양식과 기존 방법 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!