입력 값 처리는 React 컴포넌트에서 자주해야하는 일입니다.

이 기사에서는 React 후크로 입력을 처리하는 방법을 살펴볼 것입니다.

useState Hook 사용

React 컴포넌트에서 입력 값을 사용할 수 있도록하려면 입력 값을 상태 값으로 설정해야합니다.

이를 위해 useState후크를 사용할 수 있습니다 .

예를 들어 다음과 같이 작성할 수 있습니다.

import React from "react";
export default function App() {
  const [inputValue, setInputValue] = React.useState("");
  const onChangeHandler = (event) => {
    setInputValue(event.target.value);
  };
  return (
    <div>
      <input
        type="text"
        name="name"
        onChange={onChangeHandler}
        value={inputValue}
      />
      <p>{inputValue}</p>
    </div>
  );
}

그런 다음 상태 를 설정하기 위해 를 호출하는 매개 변수로 onChangeHandler함수를 정의합니다 .eventsetInputValueinputValue

event.target.value 입력 값이 있습니다.

그런 다음 입력 요소를 추가하고 onChangeHandler이벤트 핸들러와 inputValue상태를 각각 onChange및 value소품에 전달합니다.

그런 다음 inputValue.

입력에 입력 한 내용을 볼 value수 inputValue있도록 prop을로 설정합니다 .

입력을 자주 사용하는 경우 입력 논리를 후크에 넣을 수도 있습니다.

import React, { useState } from "react";
const useInput = ({ type }) => {
  const [value, setValue] = useState("");
  const input = (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      type={type}
    />
  );
  return [value, input];
};
export default function App() {
  const [username, userInput] = useInput({ type: "text" });
  return (
    <div>
      {userInput}
      <p>{username}</p>
    </div>
  );
}

그런 다음 우리는 전화 useInput에서 App사용할 수 있습니다.

userInput구성 요소를 div 및 username입력 값이있는 에 넣습니다 .

후크는 이전과 동일한 논리를 가지고 있습니다.

따라서 입력에 입력 할 때 렌더링 된 입력 값을 볼 수 있습니다.

결론

입력 값으로 상태 설정 함수를 호출하여 입력 값을 처리 할 수 ​​있으므로 구성 요소에서 입력 값을 사용할 수 있습니다.