React - input(1)

<input> 태그 

유저의 입력을 받을 수 있는 박스를 생성하고 싶으면 

html에서는 아래와 같이 태그를 생성합니다.

<input type="text"/>
<input type="range"/>
<input type="date"/>
<input type="number"/>
<textarea></textarea>
<select></select>

 

 

<input>태그 이벤트

유저가 <input>에 뭔가 입력시 코드를 실행해주고 싶을 때가 많습니다.

그러고 싶으면 onChange 아니면 onInput 이벤트핸들러를 부착하면 됩니다. 

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

onChange, onInput은 input에 사용자가 입력하면 안에 있는 코드를 실행해줍니다. 

확인해보겠습니다.

아래와 같이 코드를 작성해보고 확인해보면 

<input onChange={()=>{ 
        console.log('확인');
      }}></input>

아래와 같이 입력할때마다 이벤트가 실행됩니다. 

 

<input>에 입력한 값 가져오기

e라는 파라미터를 추가해주고

e.target.value라고 적으면 현재 input에 입력된 값을 가져올 수 있습니다. 

이벤트핸들러에 e를 추가하면 e는 이벤트객체 이런식으로 부르는데 현재 발생하는 이벤트와 관련한 유용한 기능들을 제공하는 일련의 변수입니다.(작명은 e말고 자유롭게)

• e.target -> 현재 이벤트가 발생한 곳 알려줌
• e.preventDefault() -> 이벤트 기본 동작 막아줌
• e.stopPropagation() -> 이벤트 버블링 막아줌

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

확인해보겠습니다. 

 

 

사용자가 입력한 데이터 저장

사용자가 input에 입력한 데이터는 state아니면 변수에 저장해서 쓰는게 일반적입니다.

state를 하나 만들고 이벤트가발생할때마다 state에 해당값을 저장하라고 했습니다. 

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

확인해보겠습니다.

근데 위코드를 실행해보면 f를 입력하고 콘솔창에 아무것도 뜨지 않습니다. 

s까지 입력해야 f가 뜹니다. 

왜냐하면 state 변경함수는 약간 늦게 처리됩니다.(전문용어로 async하게 비동기적으로 처리됩니다). 자바스크립트에서는 늦게 처리되는 코드들은 잠깐 제쳐두고 바로 다음줄을 실행합니다. 그래서 console이 먼저실행됩니다. 

 

 

---

참고자료

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌