[react] input 태그 (onChange, onInput)

react에서는 onChange() 와 onInput() 같다

function App() {
  return (
    <input onChange={ ()=>{ console.log('Hi') } } />
  );
}

이렇게 작성하면 input창에 글자를 입력할 때마다 Hi 가 콘솔창에 출력된다.

 

 

input에 입력한 값을 state로 저장하여 출력하려면

function App() {
    let [inputVal, inputChangeVal] = useState('');
    
    return (
      <div>
        {inputVal}
        <input onChange={ (e)=>{inputChangeVal(e.target.value)} } />
      </div>
    );
}

표시된다.