focus in & out 시점 catch

리액트에서 useEffect의 의존배열로 아무리 삽질을 해도 몰랐던부분인데 알게되어 정리해보자

focus On

• onFocus : 태그에 onFocus 프로퍼티를 사용하여 onClick처럼 사용가능.
• Ref.current.addEventListener("focus", () => {}) : useRef를 달아준 HTML엘리먼트에 이벤트를 달아준다.

단, 여기서 useEffect의 의존배열은 비워준다.
의존배열을 사용하게되면 addEventListener라는 이벤트를 걸어주는 행위를 의존배열이 바뀔때마다 반복하는 행위므로 다른 메모리에 같은 이벤트를 할당 하는 무의미한 작업을 하게된다

focus Out

• onBlur : 포커스를 잃을때 사용하는 프로퍼티
• Ref.current.addEventListener("blur", () => {})

예제

const inputRef = useRef<HTMLInputElement>(null);

useEffect(()=>{
	inputRef.current?.addEventListener("focus", () => {
    	console.log("포커스에 진입했습니다")
    })
    
    inputRef.current?.addEventListener("blur", () => {
    	console.log("포커스에서 나왔습니다")
    })
    
},[])


return <input ref={inputRef} />