검색창을 구현하다가, 검색 결과 외의 다른 요소를 클릭했을때 검색 결과를 숨겨주는 기능이 필요했다.
let searchRef = useRef(null);
// 검색 리스트 렌더링용 (true이면 보여준다)
let [inputFocus, setInputFocus] = useState(false);
useEffect(() => {
function handleOutside(e) {
// current.contains(e.target) : 컴포넌트 특정 영역 외 클릭 감지를 위해 사용
if (searchRef.current && !searchRef.current.contains(e.target)) {
setInputFocus(false);
console.log("hi");
}
}
document.addEventListener("mousedown", handleOutside);
return () => {
document.removeEventListener("mousedown", handleOutside);
};
}, [searchRef]);
<div ref={searchRef}>
<div>검색창 input</div>
<div>검색 리스트</div>
</div>
그리고 검색창과 검색결과를 담고 있는 div 태그에 ref를 걸어주어 해당 div 외에는 외부영역이라 감지 할 것
<input
placeholder="검색하고 싶은 강의를 입력하세요."
onChange={inputCtrl}
value={searchInput}
onFocus={() => {
setInputFocus(true);
}}
/>
검색결과가 나온 뒤 외부영역을 클릭했을때 검색 결과가 잘 숨겨졌다. 하지만 input을 다시 포커스 했을때는 검색 결과가 다시 나타나지 않았기에 onFocus
이벤트를 주어 state를 true값으로 바꿔주니 정상적으로 동작은 한다 (맞는것인지는 잘 모르겠다)