React의 제어되는 구성요소와 제어되지 않는 구성요소

제어 구성 요소: 상태 또는 소품을 통해 양식 요소의 상태를 제어하는 ​​React 구성 요소입니다. 즉, 모든 상태 변이에는 관련 핸들러 기능이 있습니다.

특징

• 상태 - 요소 값에 의해 제어되는 값은 상태 변수에 바인딩됩니다
• 이벤트 핸들러 필요 - 상태를 업데이트하려면 이벤트 핸들러가 필요합니다
• 예측 가능 - 컴포넌트 상태가 입력 값을 나타내기 때문에 컴포넌트 예측이 가능하고 디버깅이 쉽습니다
• React는 입력 데이터를 처리하고 현재 입력 값을 추적하기 위해 DOM에 의존하지 않습니다.

import React, { useState } from 'react';

function ControlledForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <input 
        type="text" 
        value={value} 
        onChange={handleChange} 
      />
    </form>
  );
}

제어되지 않는 구성 요소: DOM 자체가 양식 요소의 상태를 처리하는 React 구성 요소입니다. React는 자체 상태를 내부적으로 저장하는 ref를 통해 입력 값에 액세스하고, 필요할 때 ref를 사용하여 DOM에 쿼리하여 현재 값을 찾습니다. 이는 전통적인 HTML과 좀 더 비슷합니다.

특징

• DOM에 의해 제어되는 값 - 입력 필드의 값은 상태 변수에 바인딩되지 않습니다.
• Ref를 사용하여 값에 액세스하거나 필요할 때 입력 요소의 값을 가져옵니다
• 입력에 대한 실시간 제어가 필요하지 않은 경우 설정이 더 간단합니다.
• 입력을 제어하는 ​​데 반응 상태가 필요하지 않은 시나리오에 적합합니다.

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Input Value: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

다음은 제어되는 구성 요소와 제어되지 않는 구성 요소 간의 비교표입니다.

언제 언제 사용
실시간 검증, 입력 형식 지정 또는 즉각적인 피드백을 위해 제어됩니다.
제어되지 않음 - 파일 업로드와 같은 간단한 사용 사례에 사용됨 미리 채워진 양식 값은 자주 사용되지 않거나 양식 제출까지 연기해야 ​​합니다.

위 내용은 React의 제어되는 구성요소와 제어되지 않는 구성요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!