라이브러리 없이 react에서 기본 양식 빌드

React는 대화식 애플리케이션에 적합합니다. 클라이언트 측 상태 외에도 양식은 대화식 애플리케이션에서 가장 중요한 개념 중 하나입니다. 양식을 작성하기 위한 Formik과 같은 많은 라이브러리가 있습니다. 그러나 이러한 라이브러리를 이해하려면 반응 형식의 기본을 이해하는 것이 중요합니다.

우리가 만들고자 하는 양식

반응하는 양식의 기본 개념을 보여주기 위해 다음 예제를 개발할 것입니다. 여기에는 텍스트, 라디오 버튼 및 선택과 같은 다양한 양식 필드가 포함됩니다.



thiscodestandbox에서 jsx로 작성된 기본 양식을 찾을 수 있습니다. 이 게시물의 일부는 아니지만 최소한 기본 html 요소를 사용하여 액세스 가능한 양식을 만드십시오. 모든 필드에는 레이블이 있어야 하며 제출 버튼은 onClick-handler가 있는 div가 아닌 버튼이어야 합니다.

반응에서 제어되지 않거나 제어되는 구성 요소를 사용하여 양식의 상태를 처리할 수 있습니다.

제어되지 않는 구성요소

제어되지 않는 구성 요소에서는 양식의 상태를 반응으로 저장하지 않지만 dom-elements에 저장됩니다. 상태를 저장하기 위해 useState, useReducer 또는 기타 후크가 필요하지 않습니다.

export default function App() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    for (const [key, value] of formData.entries()) {
      console.log(key, value);
    }
  };
  return (
    <div className="container">
      <form className="my-3" onSubmit={(e) => handleSubmit(e)}>
    ...
        <div className="mb-3">
          <label htmlFor="email" className="form-label">
            Email address:*
          </label>
          <input
            type="email"
            className="form-control"
            id="email"
            name="email"
            required
          />
        </div>
        ...
        <div className="mb-3">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    </div>
  );
}

https://codesandbox.io/s/react-js-form-uncontrolled-components-oxg3n1

이 예제에서는 onSubmit-handler를 설정하고 FormData API 으로 양식 요소에서 양식 데이터를 가져옵니다. 모든 필드의 이름을 지정하는 것이 중요합니다. 그러면 for 루프의 키에 입력된 값의 이름과 값이 포함됩니다. FormData API를 사용하면 API로 바로 보내거나 객체 또는 json 또는 …로 변환할 수 있습니다.

이벤트에서 제어되지 않는 구성 요소의 데이터를 가져오거나 useRef를 사용하여 DOM 요소를 저장하고 저장된 요소에서 콘텐츠를 추출할 수 있습니다.

제어되지 않는 구성 요소는 react의 상태 관리에 잘 통합되지 않습니다. 대부분 제어되는 구성 요소를 사용하려고 합니다. 비반응 코드를 반응에 통합하려는 경우 제어되지 않는 구성 요소가 편리할 수 있습니다. 그러나 이것은 드문 경우입니다.

제어되는 구성 요소

제어된 구성 요소를 사용하면 반응 중인 양식의 상태를 저장합니다. 따라서 useState, useReducer 또는 기타 상태 관리 개념을 사용할 수 있습니다. 이 예에서는 useState를 사용하여 상태를 저장합니다. 입력 필드가 변경되면 handleChange 함수가 호출되고 필드의 내용이 상태에 기록됩니다. 필드에서 이름과 값을 추출하므로 모든 양식 필드에 대해 하나의 기능을 사용할 수 있습니다.

사용자가 제출 버튼을 클릭하면 handleSubmit 함수가 호출되고 formData 변수에서 상태를 사용할 수 있습니다.

import { useState } from "react";

export default function App() {
  const [formData, setFormData] = useState({
    email: "",
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };
  return (
    <div className="container">
      <form className="my-3" onSubmit={(e) => handleSubmit(e)}>
        ...
        <div className="mb-3">
          <label htmlFor="email" className="form-label">
            Email address:*
          </label>
          <input
            type="email"
            className="form-control"
            id="email"
            name="email"
            required
            onChange={handleChange}
          />
        </div>
        ...
        <div className="mb-3">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    </div>
  );
}

https://codesandbox.io/s/react-js-forms-controlled-components-9sp48j

제어되는 구성 요소는 반응에 잘 통합되어 있으며 잘 알려진 상태 관리 개념을 사용할 수 있습니다.

입력 유형 = "파일"

항상 한 가지 예외가 있습니다. 입력 유형 파일을 사용하려면 제어되지 않는 구성 요소를 사용해야 합니다. 제어되지 않은 구성 요소에서 전체 양식을 작성할 수 있지만 제어되지 않은 하나의 파일 필드만 사용할 수도 있습니다.

이 예에서는 이미지를 선택할 수 있으며 제출 버튼을 클릭하면 이미지가 표시됩니다.

import "bootstrap/dist/css/bootstrap.min.css";

import { useState } from "react";

export default function App() {
  const [image, setImage] = useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (e.target.elements.image.files.length > 0) {
      var reader = new FileReader();
      reader.onload = function () {
        setImage(reader.result);
      };
      reader.readAsDataURL(e.target.elements.image.files[0]);
    }
  };
  return (
    <div className="container">
      <form onSubmit={(e) => handleSubmit(e)}>
        <div className="mb-3">
          <label htmlFor="image" className="form-label">
            Image:
          </label>
          <input type="file" className="form-control" id="image" name="image" />
        </div>
        <div className="mb-3">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
      {image && <img src={image} alt="" />}
    </div>
  );
}

https://codesandbox.io/s/react-js-form-input-type-file-qpqjm8

handleSubmit 함수에서 FileReader-API를 사용하여 이미지 내용을 dataURL로 가져옵니다. 이 데이터 URL을 상태 변수 이미지에 넣습니다. 이미지 변수가 채워지면 이미지를 표시합니다.

FileReader-API을 사용하여 다양한 형식(text, blob, dataURL, …)의 파일 콘텐츠를 가져올 수 있습니다.

요약

제어되는 구성 요소와 제어되지 않는 구성 요소 간의 차이점을 알고 있습니다

.

입력 유형=파일은 제어되지 않은 상태로 사용해야 합니다.

액세스 가능한 양식을 작성합니다. (의미 있는 레이블, 오류 메시지, 피드백)

추가 자료

reactjs documentation: Forms