TRACK1 리팩토링 이야기, onBlur

이벤트 핸들러 속성(Attribute) - onBlur

onBlur 이벤트는 사용자가 해당 요소에서 포커스를 다른 요소로 이동시키면 발생한다.

예를 들어, 사용자가 입력 필드에서 텍스트를 입력하고 다른 곳을 클릭하여 입력 필드에서 포커스를 해제할 때 onBlur 이벤트가 발생한다.

이를 이용하여 사용자의 동작에 반응하거나 특정 동작을 수행할 수 있다.

주로 입력 유효성 검사, 자동 완성, 데이터 저장 등의 기능에 활용된다.

나는 해시태그 개발에서 해시태그 div 태그 바깥에 click이 일어날 경우에도 enter와 같은 효과를 일으키는데 onBlur를 사용했다.

input 창에서 깜빡임이 없어지는 순간, onBlur의 함수가 실행될 것이다!

  function handleAddHashtag() {
    const value = hashtagRef.current?.value.trim();
    if (value) {
      setHashtagText([...hashtagText, value]);
      hashtagRef.current!.value = "";
      setHashtagLength(0);
    }
  }

  function handleEnterHashtag(e: KeyboardEvent<HTMLInputElement>) {
    if (e.key !== "Enter") return;
    handleAddHashtag();
  }

  function handleOutsideClick() {
    handleAddHashtag();
  }

   <HashtagInput
                  placeholder="Hashtag"
                  onKeyDown={handleEnterHashtag}
                  onChange={checkHashtagText}
                  onBlur={handleOutsideClick}
                  inputWidth={hashtagLength}
                  ref={hashtagRef}
                />