[React] - Input 공부하기

Input태그를 이용하여 무언가를 입력시 코드를 실행시키기

사용자가 input에 뭔가 입력시 코드를 실행해주고 싶은 상황이 올때 onChange와 onInput 이벤트 핸들러를 이용합니다.

<input onChange={()=>{ 실행할코드 }}/>

onChange, onInput은 input에 유저가 무언가를 입력할때마다 작성한 코드를 실행해줍니다.
실행할 코드 안에 console.log(1)을 넣어 테스트해보는게 학습에 큰 도움이 됩니다.

Input에 입력한 값 가져오는 법

<input onChange={(e)=>{ console.log(e.target.value) }}/>

사용자가 input에 입력한 데이터 저장하기

function App (){

  let [입력값, 입력값변경] = useState('');
  return (
    <input onChange={(e)=>{ 
      입력값변경(e.target.value) 
      console.log(입력값)
    }} />
  )
}