React.js | 컴포넌트 바깥 영역 클릭 시 이벤트

 

useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (barRef.current && !barRef.current.contains(event.target as Node)) {
setBarOpen(false);
}
}
if (barOpen) {
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}
}, [barRef])