양식 유효성 검사는 웹 개발의 중요한 측면으로, 데이터 무결성을 보장하고 사용자 경험을 향상시킵니다. 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> ); };
이러한 전통적인 접근 방식에서
이 작업은 작동하지만 상용구 코드가 많이 포함되어 더 큰 형식에서는 번거로울 수 있습니다.
React Hook 양식 입력
설치
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!