[React] onBlur onFocus 이벤트

이전엔 익숙한 onChange나, onClick, onkeydown 등 이벤트를 활용을 해봤지만, 생소한 onBlur와 onFocus를 정리해 두려고 한다.

onBlur

• onBlur는 이벤트가 target하고 있는 곳에 focus가 out되었을 때 작동하는 이벤트이다. 즉, input태그에서 값을 입력하고 다음으로 넘어갈 때 발생하게 되는 이벤트인 것이다.
• onFocus와는 정확히 반대되는 이벤트이다.

onFocus

• onFocus는 이벤트가 target하고 있는 곳에 focus가 on되면 작동하는 이벤트이다. 즉 onBlur와는 반대로 input태그에서 값을 입력하려고 focus되는 순간 발생하게 되는 이벤트인것이다.

활용

나는 위의 이벤트를 유효성 검사에서 활용하기 위해 사용하였다.

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}
/>

validEmail라는 state(true, false)값을 두고, 해당 값이 @, .을 포함하고 있지 않으면 email로써 판단할 수 없다고 하여 true값으로 바꾼다.

input태그에 onBlur이벤트를 걸어두어 해당 값을 입력후 유효성 검사를 판별하여 validEmail라는 state값을 true로 변화시키도록 만들고 input태그의 테두리를 red로 바꾸었다.