중간 수준: 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 요소에서 직접 양식 데이터에 액세스할 수 있습니다.

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));
      }}
    >
      {({ errors, touched }) => (
        <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 생태계에서 더욱 효과적이고 효율적인 개발자가 될 수 있습니다.

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