React에서 제어되는 구성 요소는 콜백 함수를 통해 현재 값을 업데이트하는 구성 요소를 의미합니다. 양식을 렌더링하는 React 구성 요소는 사용자 입력 중에 양식에서 발생하는 작업도 제어합니다. 컴포넌트의 상태에 이런 종류의 컴포넌트를 React에서는 제어되는 컴포넌트라고 부릅니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
양식을 렌더링하는 React 구성 요소는 사용자 입력 중에 양식에 발생하는 일도 제어합니다. 이런 방식으로 React에 의해 값이 제어되는 양식 입력 요소를 "제어 컴포넌트"라고 합니다.
일부 네티즌들은 이렇게 설명했습니다. React에서는 폼의 상태가 바뀔 때마다 컴포넌트의 상태에 기록됩니다. 이런 유형의 컴포넌트를 React에서는 제어되는 컴포넌트라고 합니다.
제어되는 구성요소에 대한 업데이트 프로세스:
1. 초기 상태에서 폼의 기본값을 설정할 수 있습니다.
2. 양식 값이 변경될 때마다 onChange 이벤트 핸들러를 호출합니다.
3. 이벤트 프로세서는 이벤트 객체 e를 통해 변경된 상태를 얻고 상태를 변경합니다.
4. setState는 뷰 업데이트를 트리거하고 양식 구성 요소 값의 업데이트를 완료합니다.
제어되는 구성 요소는 OnChange와 같은 콜백 함수를 통해 현재 값을 업데이트합니다. 상위 구성 요소는 콜백 함수를 통해 상태를 제어 및 관리하고 새 값을 속성으로 전달합니다. 제어되는 구성요소는 "단순한 구성요소"라고도 합니다.
const { useState } from 'react'; function Controlled() { const [email, setEmail] = useState(); const handlerInput = (e.target.value) return <input type="text" 값={email} onChange={handleInput} />;}지식을 넓히세요:
제어되지 않는 구성요소란 무엇입니까?
제어되지 않는 구성 요소는 자체 상태를 내부적으로 저장하고 ref를 사용하여 DOM에 쿼리하여 필요할 때 현재 값을 찾을 수 있는 구성 요소입니다. 전통적인 HTML과 비슷합니다. 대부분의 기본 React 양식 구성 요소는 제어 및 비제어를 지원합니다.
const { useRef } from 'react';function 예시 () { const inputRef = useRef(null); return <input type="text" defaultValue="bar" ref={inputRef} />}4 이들의 차이점은 무엇입니까?
제어되는 구성 요소에서 양식 데이터는 React 구성 요소에 의해 처리됩니다. 제어되지 않는 구성 요소에서 양식 데이터는 DOM 자체에 의해 처리됩니다.
제어되는 구성 요소의 경우 구성 요소 상태를 사용해야 합니다. 제어되지 않는 구성 요소의 경우 상태 사용은 완전히 선택 사항이지만 Refs는 해당 구성 요소 내에서 사용해야 합니다.
제어되는 구성요소의 경우 입력을 검증할 수 있지만 제어되지 않는 구성요소에 대해서는 검증할 수 없습니다.