앞서 진행했던 [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이 잘 작동하므로, 뒤로가기 버튼은 지워주었다.
좋은 글 감사합니다.
덕분에 도움이 되었습니다