React에서 input 관리

가장 기본이 되는 React에서 input 상태를 어떻게 관리하는지 정리했다.

 

onChange를 통해 useState에 value값을 넣어주면 된다.

input의 value값은 event.target.value 이다.

import React, { useState } from "react";

export default function Test() {
  const [text, setText] = useState("");
  const onChange = (e: any) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText("");
  };

  return (
    <div>
      <input onChange={onChange} value={text}/>
      <p>결과 : {text}</p>
      <button onClick={onReset}>
        초기화
      </button>
    </div>
  );
}