[REACT] onChange

onChange

입력 필드 값이 변경될 때마다 호출되는 이벤트 핸들러

입력 필드에 텍스트 입력, 수정할 때마다 onChange 이벤트 발생 -> 입력 필드 상태 업데이트 가능

 

예제코드

import React, { useState } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");

  const handleInputChange = (e) => {
    setInputValue(e.target.value); // 입력 필드의 값을 상태로 업데이트
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}       // 입력 필드의 값을 상태로 설정
        onChange={handleInputChange} // 입력 필드의 값이 변경될 때 호출
        placeholder="Enter something..."
      />
      <p>현재 입력 값: {inputValue}</p> {/* 상태에 따라 UI 업데이트 */}
    </div>
  );
}

export default App;