지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 아키텍트 수준: React에서 양식 관리

아키텍트 수준: React에서 양식 관리

WBOY
풀어 주다： 2024-07-19 12:29:28
원래의
947명이 탐색했습니다.

Architect level: Managing Forms in React

React에서 양식을 관리하는 것은 정교하고 사용자 친화적인 애플리케이션을 구축하는 데 있어 중요한 측면입니다. 아키텍트 수준의 개발자로서 양식의 확장성, 유지 관리 및 성능을 보장하는 모범 사례와 패턴을 이해하고 설계하는 것이 중요합니다. 이 글에서는 제어되는 구성 요소와 제어되지 않는 구성 요소, 양식 유효성 검사, 복잡한 양식 관리 기술을 다루며 아키텍처 수준에서 React의 양식 처리에 대한 포괄적인 가이드를 제공합니다.

제어되는 구성 요소

제어 구성 요소는 양식 데이터가 구성 요소의 상태에 따라 관리되는 React 구성 요소입니다. 이 방법은 양식 입력에 대한 완전한 제어를 제공하여 양식 동작을 더 예측 가능하고 디버그하기 쉽게 만듭니다.

상태를 사용하여 양식 데이터 처리

제어되는 구성요소는 입력이 변경될 때마다 상태를 업데이트합니다. 이 접근 방식은 상태가 항상 현재 입력 값을 반영하도록 보장합니다.

예:

import React, { useState } from 'react';

const ControlledForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${formData.name}, Email: ${formData.email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;
로그인 후 복사

이 예에서 useState는 양식 데이터를 관리하고, 사용자가 입력 필드에 입력할 때마다 handlerChange 함수는 상태를 업데이트합니다.

제어되지 않는 구성 요소

제어되지 않는 구성 요소는 DOM을 사용하여 양식 데이터를 관리합니다. refs를 사용하면 DOM 요소에서 직접 양식 데이터에 액세스할 수 있습니다. 이 접근 방식은 즉각적인 DOM 액세스가 필요할 때 유용합니다.

Refs를 사용하여 양식 데이터에 액세스

제어되지 않는 구성 요소를 생성하려면 useRef 후크를 사용하여 양식 요소에 대한 참조를 생성하세요.

예:

import React, { useRef } from 'react';

const UncontrolledForm = () => {
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${nameRef.current.value}, Email: ${emailRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameRef} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" ref={emailRef} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledForm;
로그인 후 복사

이 예에서 nameRef 및 emailRef 참조는 양식이 제출될 때 DOM 요소에서 직접 입력 값에 액세스하는 데 사용됩니다.

양식 검증

제출 전에 사용자 입력이 필수 기준을 충족하는지 확인하려면 양식 유효성 검사가 중요합니다. 강력한 검증을 구현하면 사용자 경험이 향상되고 유효하지 않은 데이터가 처리되는 것을 방지할 수 있습니다.

기본 검증 기술

기본 유효성 검사에는 양식 제출 핸들러의 입력 값을 확인하고 적절한 오류 메시지를 표시하는 작업이 포함됩니다.

예:

import React, { useState } from 'react';

const BasicValidationForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });
  const [errors, setErrors] = useState({});

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

  const validate = () => {
    const newErrors = {};
    if (!formData.name) newErrors.name = 'Name is required';
    if (!formData.email) newErrors.email = 'Email is required';
    return newErrors;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const newErrors = validate();
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
    } else {
      alert(`Name: ${formData.name}, Email: ${formData.email}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
        {errors.name && <span>{errors.name}</span>}
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <span>{errors.email}</span>}
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default BasicValidationForm;
로그인 후 복사

이 예에서 유효성 검사 기능은 이름과 이메일 필드가 비어 있는지 확인하고 그에 따라 오류 메시지를 설정합니다.

양식 검증을 위한 타사 라이브러리

Formik 및 Yup과 같은 타사 라이브러리를 사용하면 양식 유효성 검사를 단순화하고 유지 관리하기 쉽게 만들 수 있습니다.

Formik 및 Yup의 예:

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
});

const FormikForm = () => (
  <div>
    <h1>Signup Form</h1>
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={SignupSchema}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {() => (
        <Form>
          <label>
            Name:
            <Field name="name" />
            <ErrorMessage name="name" component="div" />
          </label>
          <br />
          <label>
            Email:
            <Field name="email" type="email" />
            <ErrorMessage name="email" component="div" />
          </label>
          <br />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

export default FormikForm;
로그인 후 복사

이 예에서는 Formik과 Yup이 양식 상태와 유효성 검사를 처리합니다. Formik은 양식을 관리하는 유연한 방법을 제공하고 Yup은 유효성 검사 스키마 정의를 돕습니다.

복잡한 양식 관리

다단계 양식 관리

다단계 양식에는 여러 단계에 걸쳐 상태와 탐색을 관리하는 작업이 포함되며, 양식 작성 프로세스를 더 쉽고 사용자 친화적으로 만드는 경우가 많습니다.

예:

import React, { useState } from 'react';

const MultiStepForm = () => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    address: '',
  });

  const nextStep = () => setStep(step + 1);
  const prevStep = () => setStep(step - 1);

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(JSON.stringify(formData, null, 2));
  };

  switch (step) {
    case 1:
      return (
        <form>
          <h2>Step 1</h2>
          <label>
            Name:
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={nextStep}>
            Next
          </button>
        </form>
      );
    case 2:
      return (
        <form>
          <h2>Step 2</h2>
          <label>
            Email:
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={prevStep}>
            Back
          </button>
          <button type="button" onClick={nextStep}>
            Next
          </button>
        </form>
      );
    case 3:
      return (
        <form onSubmit={handleSubmit}>
          <h2>Step 3</h2>
          <label>
            Address:
            <input
              type="text"
              name="address"
              value={formData.address}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={prevStep}>
            Back
          </button>
          <button type="submit">Submit</button>
        </form>
      );
    default:
      return null;
  }
};



export default MultiStepForm;
로그인 후 복사

이 예에서는 양식 상태가 여러 단계에 걸쳐 관리됩니다. nextStep 및 prevStep 함수는 단계 간 탐색을 처리합니다.

양식에서 파일 업로드 처리

파일 업로드 처리에는 파일 입력 요소를 사용하고 업로드된 파일을 구성 요소 상태에서 관리하는 작업이 포함됩니다.

예:

import React, { useState } from 'react';

const FileUploadForm = () => {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (file) {
      alert(`File name: ${file.name}`);
    } else {
      alert('No file selected');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Upload file:
        <input type="file" onChange={handleFileChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default FileUploadForm;
로그인 후 복사

이 예에서 handlerFileChange 함수는 선택한 파일로 상태를 업데이트하고, handlerSubmit 함수는 양식 제출을 처리합니다.

결론

React에서 양식 관리에는 제어된 구성 요소와 제어되지 않은 구성 요소를 이해 및 구현하고, 양식 유효성 검사를 수행하고, 다단계 양식 및 파일 업로드와 같은 복잡한 양식을 처리하는 작업이 포함됩니다. 이러한 개념을 익히면 React 애플리케이션에서 강력하고 유지 관리가 가능하며 사용자 친화적인 양식을 만들 수 있습니다. 아키텍트 수준의 개발자로서 양식 관리에 대한 모범 사례를 설계하고 시행하는 능력은 팀의 생산성과 애플리케이션의 전반적인 품질을 크게 향상시켜 개발 프로세스 전반에 걸쳐 높은 표준이 유지되도록 보장합니다.

위 내용은 아키텍트 수준: React에서 양식 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：Next.js 서버 작업은 안전합니까? 다음 기사：Cypress를 사용한 React 애플리케이션 테스트: 종합 가이드
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2270
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2404
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
2018
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1904
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1973
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿