onBlur 정리

-  onBlur가 뭐냐면

onBlur는 쉽게 말해서 인풋이나 textarea 등 입력창에서 포커스가 빠져나가는 순간! 실행되는 이벤트다.
예를 들어 이메일 입력창에 커서 두고 입력하다가 다른 곳 클릭하거나 tab으로 넘어가면 그때 onBlur가 실행된다.

 

-  onBlur를 쓰는 이유

개발을 하다보면 form 작성에서는 유효성 검사가 필수적이다.(이메일, 전화번호, 닉네임 등등등,,,) 

특히 사용자가 입력 중에 방해하지 않고, 입력을 마친 시점에 유효성 검사를 하고 싶을 떄 onBlur가 굉장히 유용하다.

 

- onChange랑 다른 점

대부분 처음에는 onChange만 쓰게 된다. 나도 그랬다,, 근데 이건 입력값이 바뀔 때마다 실행된다.
즉, 한글자 한글자 칠 때마다 검사를 떄리는 실시간 검사이다 !

• onChange: 사용자가 @까지도 안 친 상태에서도 계속 형식 잘못되었다고  설레발 느낌
• onBlur: 입력을 다 끝내고 마우스가 빠질 때 검사 → 사용자 입장에서는 훨씬 덜 귀찮음

내가 사용한 예시 !

<input
  id="email"
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  onBlur={handleEmailError}
  placeholder="이메일"
/>
{emailError && <p className="text-red-500">{emailError}</p>}

 

 

즉, 결론은 유효성 검사할 때 

• 사용자가 입력을 다 끝내고 나서 피드백을 주고 싶을 때
• 에러 메시지를 불필요하게 자주 보여주고 싶지 않을 때 

사용하면 너무 좋을 듯 하댜!!!