[OutsideClick] outside click 구현 #2

앞서 진행했던 [OutsideClick] outside click 구현 #1를 바탕으로 내 프로젝트에 적용해봤다.

이전에는 위와 같이 검색 버튼을 클릭하고 뒤로가기 버튼을 클릭해야 검색 팝업이 사라지는 모습이었다.

ref 를 이용해서 팝업 바깥을 누르면 사라지는 기능을 추가해보자!

기존 코드에 떡하니 custom hook을 추가했다.

 const useOutsideClick = (callback: () => void) => {
    const ref = useRef<HTMLDivElement>(null)

    useEffect(() => {
      const handleClick = (event: BaseSyntheticEvent | globalThis.MouseEvent) => {
        if (ref.current && !ref.current.contains(event.target)) {
          callback()
        }
      }

      document.addEventListener('click', handleClick)

      return () => {
        document.removeEventListener('click', handleClick)
      }
    }, [callback, ref])

    return ref
  }

  const clickRef = useOutsideClick(handleSearchClick)

딱 이 코드만 추가했고, 검색창 div에 ref = {clickRef}를 추가해줬다.

이전 코드와 다른 부분은 handleClick의 매개변수인 event의 타입이다.
처음에는 이전과 동일하게 BaseSyntheticEvent | MouseEvent 으로 설정했었지만,

이렇게 에러가 발생했다.
이를 해결하기 위해 addEventListener에 커서를 가져다대니 바로 해결 방법이 나왔다.

event 가 globalThis.MouseEvent라고 나와있기 때문에 BaseSyntheticEvent | globalThis.MouseEvent로 설정해주면 된다!

추측하기엔, 해당 컴포넌트가 아닌 바깥 컴포넌트에서 클릭할 때 이벤트가 발생해야 하므로 앞에 globalThis를 붙여줘야 하는 것 같다.

이 커스텀 훅을 적용했더니 아래와 같이 바깥을 누르면 팝업이 닫히는 기능이 완성되었다!
outside click이 잘 작동하므로, 뒤로가기 버튼은 지워주었다.