React useState에서 input 값 관리

https://crispypotato.tistory.com/148  

처럼 <input> 태그에 들어간 값을 useState로 변경을 똑같이 해주려고 할 때는 onChange 이벤트를 사용하여 input의 value값을 받아 사용한다.

 

사용 예시

 

input에 값을 넣어주면 onChange 함수를 통해 useState의 setter함수에 데이터가 들어간다

 

import React, { useState } from 'react';

function Input() {
  const [text, setText] = useState('')
  const change = (e) => {
    setText(e.target.value)
  }
  const reset = () => {
    setText('')
  }
  return (
    <div>
      <input onChange={change} value={text}></input>
      <button onClick = {reset}>초기화</button>
      <div>
        <b>값:{text}</b>
      </div>
    </div>
  );
}

export default Input;

 

출처 : https://react.vlpt.us/basic/08-manage-input.html