[React] onChange와 onBlur

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

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

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

그래서 리액트에서는 onChange와 onInput이 사실상 동일한 이벤트로 취급되고, 이 중에서는 onChange가 더 자주 사용되는 것 같다.

그렇다면 React에서 자바스크립트의 onChange 이벤트처럼
input에서 포커스가 벗어났을 때 값의 변경이 있는 경우 이벤트를 감지하려면 어떻게 해야할까?

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

그 다음에 이전값과 현재값을 비교해서 값의 변경이 있는지 수동으로 확인해주면 된다.(주로 유효성 검사에서 활용)

import {useState} from 'react'

const [validEmail, setValidEmail] = useState(false)
const isValidEmail = userInfo.email.includes('@') && userInfo.email.includes('.')

// 이메일 입력
const handleInputValue = (key) => (e) => {
  setUserInfo({ ...userInfo, [key]: e.target.value })
}

// 이메일 유효성 검사
const handleOnBlur = () => {
    if (!isValidEmail) {
      setValidEmail(true)
    } else {
      setValidEmail(false)
    }
  }

<Input
  type="email"
  placeholder="이메일을 입력하세요"
  onChange={handleInputValue('email')}
  onBlur={handleOnBlur}
  ref={emailInput}
  borderColor={validEmail}
/>

onChange 이벤트를 통해 상태값을 변경해주고, 유효성검사는 onBlur를 통해 감지한다.