Input value control (input 상태 관리)

React에서의 input값 제어하기.

기본적인 js문법을 알고있어야지 이해가 빠를거같다.

 

// useState를 import 시켜주어야지 정상적으로 사용이 가능하다.
import React, {useState} from 'react';

function InputSample() {
   // text 변경해야하는값 (value)
   // setText 함수
   // useState('') 초기값 (빈값)
   const [text, setText] = useState('');

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

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

   return (
      <div>
         // event 연결
         <input onChange={onChange} value={text} />
         <button onClick={onReset}>Reset</button>
         <div>
            <b>Value : </b>
            {text}
         </div>
      </div>
   );
};

export default InputSample;