6. useState를 이용해서 <input> 상태 값 관리해보기

# 시작하기에 앞서 <input> 값을 관리하기 위해서는 input의 onChange라는 이벤트를 활용해주어야 한다.

이벤트 객체 e를 파라미터로 받아와서 사용할 수 있는데, 이때 'e.target = 이벤트가 발생한 input DOM'을 가리키게된다.

이 input DOM의 value 값 = e.target.value는 현재 input 에 입력한 값인 것!

 

import React, { useState } from 'react';

function InputSample() {
  const [text, setText] = useState('');

  const onChange = (e) => {
    setText(e.target.value);
  }

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

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

export default InputSample;

(주의!) 이때 <input>의 value에도 {text}로 설정해주어야 상태가 바뀔 때마다 <input>의 내용도 실시간 업데이트된다!

---

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