[React] 특정 영역 외 클릭감지

검색창을 구현하다가, 검색 결과 외의 다른 요소를 클릭했을때 검색 결과를 숨겨주는 기능이 필요했다.

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값으로 바꿔주니 정상적으로 동작은 한다 (맞는것인지는 잘 모르겠다)

참고 : https://sezzled.tistory.com/147