제어 및 비제어 입력

제어된 입력과 제어되지 않은 입력은 웹 개발, 특히 React와 같은 프레임워크에서 양식 입력과 관련하여 사용되는 용어입니다.

제어된 입력

제어된 입력에서 입력 필드의 값은 구성요소의 상태에 따라 제어됩니다. 즉, 구성 요소의 상태는 입력의 현재 값을 유지하며 입력 값이 변경되면(예: 사용자 입력을 통해) 상태를 업데이트하고 입력 값은 상태를 반영합니다. 이는 일반적으로 입력의 value prop을 상태 값으로 설정하고 입력이 변경될 때 상태를 업데이트하는 onChange 핸들러를 제공하여 수행됩니다. 제어 입력은 양식 처리를 위해 React 애플리케이션에서 일반적으로 사용됩니다.

import React, { useState } from 'react';

function ControlledInputExample() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

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

제어되지 않은 입력

제어되지 않은 입력에서는 입력 필드의 값이 React 상태에 의해 직접 제어되지 않습니다. 대신 입력 요소는 자체 상태를 내부적으로 관리합니다. 즉, React는 입력 값을 직접 제어할 수 없으며 값을 얻으려면 일반적으로 React 상태를 쿼리하는 대신 DOM에 직접 액세스해야 합니다(예: refs 사용). 제어되지 않은 입력은 React에서는 덜 일반적이지만 복잡한 양식 동작을 처리하거나 입력 상태를 다르게 관리하는 비React 라이브러리와 통합하는 등 특정 상황에서는 유용할 수 있습니다.

import React, { useRef } from 'react';

function UncontrolledInputExample() {
  const inputRef = useRef(null);

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Get Value</button>
    </div>
  );
}

요약하자면, 제어된 입력은 입력 값을 React 상태에 직접 연결하여 UI와 상태 간의 더 많은 제어 및 동기화를 제공합니다. 제어되지 않은 입력은 DOM 또는 기타 라이브러리에 의해 내부적으로 관리되며 React는 필요할 때 해당 값에 간접적으로 액세스합니다.

위 내용은 제어 및 비제어 입력의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!