React의 제어된 양식

코딩 부트 캠프의 두 번째 단계가 끝나갑니다. 이 단계에서는 첫 번째 단계에서 JavaScript를 배운 후 React 프레임워크 사용에 대해 배웠습니다. React가 훨씬 더 조직화되어 있고 HTML처럼 보이는 코드를 작성할 수 있다는 점이 마음에 들었습니다. 작동 방식 중 일부를 이해하는 것이 약간 까다로웠지만 좀 더 사용자 친화적이라는 것을 알았습니다. 내가 이해하기 가장 어려운 것 중 하나는 제어된 양식을 설정하는 방법이므로 다음 블로그에 대한 최고의 주제가 될 것이라고 결정했습니다!

제어된 양식의 이점에 대한 나의 이해는 사용자가 입력한 데이터를 사용자가 양식에 입력할 때 State Hook을 사용하여 실시간으로 업데이트되기 때문에 사용자가 입력한 데이터를 더 잘 제어할 수 있다는 것입니다. 페이지를 수동으로 새로 고치지 않고 상태 변수가 변경될 때마다 구성 요소가 다시 렌더링됩니다. 필요한 경우 다른 구성 요소 또는 요소는 상태 값을 사용할 수 있습니다. 이는 제출된 후 페이지에서 양식 입력을 렌더링해야 하는 경우에 유용합니다.

제어된 양식을 설정하려면 상태 변수와 양식 입력이 변경될 때 상태를 업데이트하는 함수가 필요합니다.

상태를 설정하기 전에 상태 후크를 가져와야 합니다. 상태에 대한 자세한 내용은 ReactState Hook 페이지를 참조하세요.

import React, { useState } from "react";

제어된 양식의 경우 상태 변수는 일반적으로 기본 입력 값을 빈 문자열로 설정하여 사용자가 양식에 항목을 입력하기 전에 빈 필드를 반영하는 데 사용됩니다.

const [inputValue, setInputValue] = useState(“”);

다음으로 양식 입력이 변경될 때 상태 변수를 업데이트하는 함수를 설정합니다. 가장 좋은 방법은 상태 변수를 업데이트하는 함수를 설정하기 전에 양식 입력을 캡처하고 있는지 확인할 수 있도록 처음 설정할 때 이벤트 대상 값을 콘솔에 기록하는 것입니다.

function handleInputValueChange(event) {
  console.log(event.target.value);
}

중괄호 안의 함수를 호출하는 입력 요소에 onChange 이벤트 리스너를 추가합니다.

<input
   type="text"
   name="title"
   placeholder="Title"
   onChange={handleInputValueChange}
/>

올바르게 작동하는 경우 콘솔 로그는 입력 중인 양식에 입력된 모든 내용을 표시해야 합니다.



이제 입력 값을 캡처하고 있으므로 상태 변수를 업데이트하도록 할 수 있습니다. 콘솔 로그 대신 setState로 변경해야 합니다. 아래 예에서는 이벤트 대상 값으로 InputValue를 설정합니다. 함수 외부에서 상태 변수를 콘솔 로그에 기록하면 사용자가 양식의 입력 필드에 무언가를 입력할 때 상태 변수가 업데이트되고 있음을 확인할 수 있습니다.

function handleInputChange(event) {
  setInputValue(event.target.value);
}

console.log(inputValue)

그게 다야! 이제 제어된 양식에 대한 기본 설정이 있습니다. 둘 이상의 입력 필드가 있는 경우 각 입력 필드에서 이 작업을 수행할 수 있습니다. 선택과 같은 다른 양식 요소에도 사용할 수 있습니다. 제출 이벤트에 대한 함수를 설정할 때 상태 변수를 다시 빈 문자열로 설정하여 제출 버튼을 클릭한 후 필드에서 사용자의 입력을 지울 수 있습니다.

이것이 제어된 형식을 이해하는 데 도움이 되기를 바랍니다! React Forms은 제어된 양식을 설정하는 데 유용한 리소스입니다. 즐거운 코딩하세요!