[React] input 태그 학습 (with event handler)

Input 태그는 사용자가 입력을 할 수 있는 태그이다.

아래와 같이 여러 종류의 input이 존재한다.

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

 

---

- input에 뭔가 입력시 코드를 실행하려면, 

onChange 또는 onInput 과 같은 event handler를 사용한다.

 

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

그 외에,

onMouseOver = { }	# 이 요소에 마우스를 댔을 때 안의 코드 실행

onScroll = { } 		# 이 요소를 스크롤했을 때 안의 코드를 실행

등등 많이 존재한다.

 

- input에 입력한 값 가져오는 방법

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

onChange 안에 함수에 파라미터로 e를 추가해주고, 

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

 

참고로

e.target 이러면 현재 이벤트가 발생한 곳을 알려주고

e.preventDefault() 이러면 이벤트 기본 동작을 막아주고

e.stopPropagation() 이러면 이벤트 버블링도 막아줍니다. 이거 쓰면 좋아요버튼 누를 때 모달창도 떠버리는 버그 해결가능

 

- hook를 사용하여, 사용자가 input에 입력한 데이터 저장하기

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

여기서는 state에 저장해서 사용하는 법을 예로 들어보자

function App (){

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

 

 

출처 : 코딩애플 'React 리액트 기초부터 쇼핑몰 프로젝트까지!'