도대체 어떻게 양식을 만들어야 합니까?

React에는 구성 요소에서 양식 데이터를 처리하는 두 가지 접근 방식이 있습니다. 첫 번째 방법은 구성 요소 내의 상태를 사용하여 양식 데이터를 처리하는 것입니다. 이것을 제어되는 구성 요소라고 합니다. 두 번째 방법은 DOM이 구성 요소에서 자체적으로 양식 데이터를 처리하도록 하는 것입니다. 이것은 제어되지 않는 구성 요소로 알려져 있습니다.

이 게시물에서는 양식에 대해 논의하고 제어되는 구성 요소와 제어되지 않는 구성 요소 사이의 React의 차이점을 설명합니다.

첫 번째: 제어되는 구성 요소

제어되는 구성 요소에서 양식 데이터는 구성 요소의 상태에 의해 처리됩니다. 데이터는 일반적으로 자체 상태를 유지하고 사용자 입력에 따라 업데이트하는 <input> , <textarea> 및 <select> 와 같은 HTML 양식 요소에 의해 유지됩니다.

제어되는 구성 요소를 사용하면 입력 값이 항상 React 상태에 의해 결정됩니다. 이것은 좀 더 많은 상용구 코드를 입력해야 함을 의미하지만 이제 값을 다른 UI 요소에도 전달하거나 다른 이벤트 핸들러에서 재설정할 수 있습니다.

React에서는 구성 요소의 상태를 사용하여 양식 요소의 요소 값을 유지하거나 관리할 수 있습니다. 다음은 제출될 때 firstName과 lastName을 기록하는 예입니다.

import React from 'react'

export default function Form(){
    const [formData, setFormData] = React.useState(
        {
            firstName: "",
            lastName: "",
        }
    )    
    function handleChange(event){
        const {name, value} = event.target
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [name]: value,
            }
        })
    }
    return (
<form>
  <label>
    FirstName:
    <input type="text" name="firstName" placeholder="First Name" onChange={handleChange} value={formData.firstName}/>
  </label>
    <label>
    LastName:
    <input type="text" name="lastName" placeholder="Last Name" onChange={handleChange} value={formData.lastName}/>
  </label>
</form>
    )
}

참고 💡- handleChange 함수 바로 앞에 Console.log(formData)를 추가하는 것을 잊지 마십시오.

formData 상태는 firstName 및 lastName 입력 요소의 값을 보유합니다. 값이 firstName 및 lastName 입력 요소에 입력될 때 연결된 onChange 이벤트는 onChange 함수를 사용하여 입력 값을 formData 상태로 설정합니다.

보시다시피 입력 요소인 firstName과 lastName의 값은 React 상태에 의해 제어됩니다. 상태는 입력 요소에 대한 "단일 소스"가 됩니다. 따라서 위에 표시된 Form 구성 요소는 제어 구성 요소입니다.

제어된 구성 요소를 사용하는 경우의 단점은 양식 요소에 더 많은 제어 요소가 추가될수록 구성 요소의 상태 수가 증가한다는 것입니다.

두 번째: 제어되지 않는 구성 요소

대안은 양식 데이터가 DOM 자체에서 처리되는 제어되지 않는 구성 요소입니다. "제어되지 않음"은 이러한 구성 요소가 React 상태에 의해 제어되지 않는다는 사실을 나타냅니다.
ref을 사용하여 DOM에서 양식 값을 가져올 수 있습니다. 예를 들어, 이 코드는 제어되지 않는 구성 요소에서 단일 이름을 허용합니다.

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

참고💡 - 유용할 수 있는 이 Codepenhere과 상호 작용할 수 있습니다.

제어되지 않는 구성 요소는 DOM에 진실의 소스를 유지하기 때문에 제어되지 않는 구성 요소를 사용할 때 React와 비 React 코드를 통합하는 것이 때때로 더 쉽습니다. 빠르고 더럽고 싶다면 코드가 약간 적을 수도 있습니다. 실제 세계에서 특히 간단한 양식과 React를 배울 때 제어되지 않는 구성 요소를 사용하는 유효한 사례가 있습니다. 하지만 강력하지는 않으므로 일반적으로 제어된 구성 요소를 사용해야 합니다.

특정 상황에 어떤 유형의 구성 요소를 사용해야 하는지 여전히 명확하지 않은 경우 controlled versus uncontrolled inputs의 이 문서가 도움이 될 수 있습니다.

결론

문제는 제어되는 구성 요소가 제어되지 않는 구성 요소보다 더 나은지 여부가 아니라 사용 사례에 더 적합하고 개인 취향에 맞는 것입니다.

Uncontrolled Components에 대한 React 문서를 클릭하면 다음table에 도달합니다.


특징
억제 되지 않은
제어


일회성 값 검색(예: 제출 시)
✅
✅

validating on submit
✅
✅

Instant field validation
❌
✅

conditionally disabling submit button
❌
✅

입력 형식 적용
❌
✅

하나의 데이터에 대한 여러 입력
❌
✅

dynamic inputs
❌
✅


삶을 더 쉽게 만들어 줄 올바른 도구를 선택하고 싶을 것입니다.