쓰는중
any때문에 찝찝하긴 했는데 내가 쌩으로 쓴 이 코드를 수정해주셨다 react-use
에 이런것도 있는지 몰랐네...
그럼 오늘은 react-use 정독하는 날로 정해보자
https://github.com/streamich/react-use
🙅import { useEffect, useRef } from 'react'
🙆import { useClickAway } from 'react-use'
const GNB = () => {
🙅 const gnbRef = useRef<any>(null)
🙆 const gnbRef = useRef<HTMLButtonElement>(null)
...
🙅 useEffect(() => {
function handleClickOutside(e: MouseEvent): void {
if (gnbRef.current && !gnbRef.current.contains(e.target as Node)) {
setIsOpen(false)
}
}
document.addEventListener('mousedown', handleClickOutside)
return () => {
document.removeEventListener('mousedown', handleClickOutside)
}
}, [gnbRef])
🙆 useClickAway(gnbRef, handleCloseMenu)
...
return (
🙅 <button>
<GnbIcon ref={gnbRef} />
</button>
🙆 <button ref={gnbRef}>
<GnbIcon />
</button>
)
}