[React] React에서 input 이벤트 사용하기 (onChange, onInput, onBlur)

자바스크립트의 onChange, onInput 이벤트는

• onChange : input에서 포커스가 벗어났을 때, input에 입력된 값이 변경되었다면 이벤트 발생
• onInput : input에 입력된 값이 변경될 때마다 이벤트 발생

이렇게 이벤트 발생 조건에 차이가 있다.

 

그런데 React에서는 onChange, onInput이 동일하게, input 값이 변경될 때마다 (포커스 아웃이 없어도)

이벤트가 발생한다.

그래서 리액트에서는 onChange와 onInput이 사실상 동일한 이벤트로 취급되고,

이 중에서는 onChange가 더 자주 사용되는 것 같다.

 

그렇다면 React에서 자바스크립트의 onChange 이벤트처럼

input에서 포커스가 벗어났을 때 값의 변경이 있는 경우 이벤트를 감지하려면 어떻게 해야할까?

 

=> onBlur 이벤트를 걸어서 포커스가 벗어나는 것을 감지하고,

그 다음에 이전값과 현재값을 비교해서 값의 변경이 있는지 수동으로 확인해주면 된다.

 

Reference :

• https://reactjs.org/docs/events.html#form-events

SyntheticEvent – React

 

 

(Velog(https://velog.io/@seomoon/React-Input-onChange-onInput-%EC%9D%B4%EB%B2%A4%ED%8A%B8)에서 이동해 온 글입니다!)