제어된 구성 요소를 사용하여 적절하게 반응

나는 진실의 단 하나의 근원을 찾는 소녀일 뿐입니다.

제어되는 구성 요소는 무엇이며 그 이유는 무엇입니까? React 양식 요소는 설정에서 일반 HTML 양식과 유사하지만 State를 사용할 때 몇 가지 추가 작업을 수행할 수 있습니다. 요소가 일반적으로 사용자 입력에 따라 자체 상태를 유지하고 업데이트하는 HTML 형식과 달리 React는 state 변수에 유지되고 setState() 로 업데이트되는 변경 가능한 상태를 사용합니다. 그러나 이러한 방법을 함께 사용하는 것이 우리를 그 영광스러운 단일 진리의 근원으로 이끄는 것입니다. 요소 폼의 값을 React가 제어하는 ​​상태에 연결하면 제어된 구성 요소가 형성됩니다. 제어된 구성 요소는 상태에서 입력 값을 파생합니다.
<input /> , <select /> , <textarea /> 와 같은 HTML 요소와 함께 state를 현재 상태의 value prop으로 전달할 수 있습니다.

아래에 두 개의 입력이 있는 빠른 양식 설정부터 시작하겠습니다.

import React, { useState } from "react";

function myControlledForm() {
  const [name, setName] = useState("");
  const [favoriteColor, setFavoriteColor] = useState("");

  return (
    <form>
      <input type="text" value={name} />
      <input type="text" value={favoriteColor} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

여기에서 상태 변수name와 setter 함수setName를 설정했습니다. 빈 문자열로 선언된 초기 상태가 있지만 setName가 호출되는 즉시 업데이트됩니다.

양식 요소 자체에서 첫 번째 입력을 이름 상태에 연결하고 두 번째 입력을 선호하는 색상 상태에 연결합니다. 하지만 onChange 이벤트 리스너를 이벤트 핸들러 콜백 함수에 연결해야 합니다.

<input type="text" onChange={handleNameChange} value={firstName} />
<input type="text" onChange={handleColorChange} value={lastName} />

이 이벤트 리스너를 입력에 소품으로 추가하면 변경 이벤트를 수신합니다. 변경될 때마다 콜백 함수가 실행되어 사용자 입력 값을 캡처하고 상태 변수를 업데이트합니다.

콜백 함수가 변경 사항을 처리하는 상태 변수에 따라 이름을 지정하는 것이 일반적인 명명 규칙입니다.

function handleNameChange(event) {
  setFirstName(event.target.value);
}

function handleColorChange(event) {
  setLastName(event.target.value);
}

이러한 함수는 위에서 선언한 해당 event.target.value 함수를 사용하여 onChange 변수를 업데이트하기 위해 입력state 이벤트 핸들러에서 제공하는 setState 를 사용합니다. 상태를 업데이트할 때 다시 렌더링하고 주기가 완료됩니다.

그럼에도 불구하고 제어 구성 요소를 사용하는 이유는 무엇입니까? 다음은 몇 가지 주요 이점입니다.

제어된 입력을 통해 입력 및 데이터를 더 많이 제어할 수 있습니다.

상태를 사용하여 양식 입력 값을 저장하면 다른 구성 요소와 상태를 공유하고 애플리케이션을 변경할 수 있습니다. 이 값을 사용하는 모든 구성 요소는 항상 정확히 동일한 현재 값에 액세스할 수 있습니다.

양식 구성 요소를 설정할 때 부모 구성 요소의 상태를 설정하고 변수와 이벤트 핸들러를 소품으로 전달할 수 있습니다. 이 설정은 애플리케이션의 다른 부분에서 보다 동적인 변경을 허용할 수 있습니다.

또한 양식 데이터를 저장하거나 데이터베이스에 게시하기 위해 애플리케이션의 다른 부분으로 보낼 수 있습니다.

제어된 입력을 검증할 수 있습니다.

제어된 입력의 정말 멋진 구현이 있습니다. 입력할 때 검색 결과를 필터링하는 방법에 대해 생각하고 싶습니다. onChange 및 콜백을 사용하여 이 간단한 입력 양식을 제어한 것과 같은 방식으로, 더 확장 가능하고 광범위한 응용 프로그램에서 상태에서 파생된 이러한 검색 값을 사용하여 모든 종류의 데이터를 검색하고 필터링할 수 있습니다.