React에서 제어되는 구성 요소와 제어되지 않는 구성 요소 구현

이 기사에서는 제어된 구성 요소를 사용하여 React 프로젝트에서 업로드 양식을 작성하고 제어되지 않은 구성 요소가 있는 등록 양식을 작성하는 방법을 보여줍니다.

먼저 Form을 생성하는 두 가지 방법, 즉 제어되지 않는 구성 요소가 있는 HTML 방식과 제어되는 구성 요소가 있는 React에 대한 모범 사례의 차이점을 설명하겠습니다.

제어되지 않는 구성요소

제어되지 않는 구성 요소는 DOM 자체에서 처리하는 양식 데이터입니다. 이러한 구성 요소는 React 상태에 의해 제어되지 않습니다.

양식 요소의 값은 전통적으로 DOM에 의해 제어되고 저장됩니다. 다음은 내 프로젝트의 등록 양식 예입니다.

import React from "react";



function Home() {

  function handleSignUp(event) {
    event.preventDefault()
  }

  return (
    <form onSubmit={handleSignUp}>
      <h1>Create an Account</h1>
      <label htmlFor="username">Username</label>
      <input type="text" id="username" />

      <label htmlFor="password">Password</label>
      <input type="password" id="password" />

      <label htmlFor="type">Account Type</label>
      <select id="type">
        <option value="free">Free</option>
        <option value="pro">VIP</option>
      </select>

      <input type="submit" value="Sign Up" />
    </form>
  );
}


export default Home;

각각 사용자 이름과 암호 값을 사용하여 사용자 이름과 암호 입력 요소에 ID 속성을 할당했습니다. 이를 검색하려면 DOM에서 필드 값을 "풀"해야 하며 이는 일반적으로 사용자가 제출 버튼을 누를 때 한 번만 수행됩니다. 이러한 유형의 양식은 입력 데이터를 관리하기 위해 DOM에 의존하기 때문에 "제어되지 않는"양식이라고 합니다.

제어되지 않은 구성 요소는 유효성 검사를 많이 할 필요가 없는 경우 양식을 작성하는 가장 쉬운 방법이지만 입력의 내부 상태를 제어할 수 없기 때문에 입력을 이전 값으로 롤백해야 합니다. 하기 귀찮은.

제어되는 구성 요소

다음과 같은 HTML의 양식 요소:

 <input>, <select>, <textarea> and <form>

일반적으로 자체 상태를 유지하고 사용자 입력에 따라 업데이트합니다. 반면 React에서는 변경 가능한 상태가 구성 요소의 state 속성에 유지되며 setState() 메서드를 통해서만 업데이트할 수 있습니다.

제어되는 구성 요소를 사용하는 것은 React에서 양식을 빌드하는 데 선호되는 방법입니다. 입력을 렌더링하는 구성 요소에 상태를 저장할 수 있으며 각 입력 필드는 현재 값을 소품으로 받아들이고 입력 상태가 변경될 때 호출되는 콜백 함수가 있습니다.

다음은 React 프로젝트에서 Controlled Component를 생성한 방법입니다.

import React, {useState} from "react";
import { useHistory } from "react-router-dom"



function PostcardForm({onAddPostcards}) {
  const history = useHistory();

  const [caption, setCaption] = useState("")
  const [image, setImage] = useState("")
  const [city, setCity] = useState ("")
  const [country, setCountry] = useState("")
  const [category, setCategory] = useState("")
  const [trivia, setTrivia] = useState ("")
  const [language, setLanguage] = useState ("")


  function handleSubmit(event) {
    event.preventDefault()

    const formData = {
      caption: caption,
      image: image,
      city: city,
      country: country,
      category: category,
      trivia: trivia,
      language: language
    }
    fetch("http://localhost:3001/postcards", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body:
        JSON.stringify(formData)
      })
      .then(response => response.json())
      .then(finalForm => {
        onAddPostcards(finalForm)
      })
      history.push("/postcards")
      setCaption('')
      setImage('')
      setCity('')
      setCountry('')
      setCategory('')
      setTrivia('')
      setLanguage('')
  }

  return (
    <div className="newPostcard">
      <h4>Upload New PostCard</h4>
      <form onSubmit= {handleSubmit}>
        <br></br>
<label>
    Caption:
        <input type="text" name="caption" placeholder="Caption" value = {caption} 
        onChange={e => setCaption(e.target.value)} />
</label>
<br></br>
<label>
  Image URL:
        <input type="text" name="image" placeholder="Image URL" value = {image} 
        onChange={e => setImage(e.target.value)} />
</label>
<br></br>
<label>
    City:
        <input type="text" name="city" placeholder="City" value = {city} 
        onChange={e => setCity(e.target.value)} />
</label>
<br></br>
<label>
    Country:
        <input type="text" name="country" placeholder="Country" value = {country} 
        onChange={e => setCountry(e.target.value)} />
</label>
<br></br>
<label>
    Category:
        <input type="text" name="category" placeholder="Category" value = {category} 
        onChange={e => setCategory(e.target.value)} />
</label>
<br></br>
<label>
    Trivia:
        <input type="text" name="trivia" placeholder="Trivia" value = {trivia} 
        onChange={e => setTrivia(e.target.value)} />
</label>
<br></br>
<label>
    Language:
        <input type="text" name="language" placeholder="Language" value = {language} 
        onChange={e => setLanguage(e.target.value)} />
</label>
<br></br>
        <button type="submit"><h3>Upload</h3></button>
      </form>
    </div>
  );
}

export default PostcardForm;

새 문자를 입력할 때마다 입력 필드의 값이 변경되므로 상태가 계속 변경됩니다. 상태는 동일한 구성 요소에 저장될 필요가 없으며 props로 전달되거나 부모 구성 요소에 저장될 수 있습니다.

좋지 않게 들릴 수 있지만 Form 구성 요소는 항상 상태와 입력 값을 "인식"하므로 실제로 유용합니다. 따라서 무언가를 검증하려는 경우 제출 시 상태 값을 "풀"한 다음 오류 메시지를 표시할 필요가 없습니다.

예를 들어 0에서 8까지의 숫자만 사용하려는 경우 실시간으로 유효성 검사 메시지를 표시할 수 있으며 이는 더 나은 사용자 경험에 기여합니다.

결론적으로

Alex Ritzcovan에서 이 유용한 팁을 찾았습니다.

바라건대, 이것은 다음 프로젝트에서 사용할 것을 결정하는 데 도움이 될 것입니다.