주니어 레벨: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!