React 컴포넌트 외부 영역 클릭이벤트 감지

✔️ 필요성

검색창 컴포넌트를 개발했는데 검색창의 외부 영역을 클릭했을 때 아래 검색 결과 창이 없어졌으면 좋겠다. 즉 리액트의 컴포넌트의 외부 영역의 클릭을 감지해서 효과를 줘야 한다.

 

 

 

✔️ 문제 해결

거의 90%는 아래 이 분의 코드를 보고 참고했다. 나중에 내가 기억하기 쉽게 하도록 내 블로그에 기록

 

https://close-up.tistory.com/entry/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%8A%B9%EC%A0%95-%EC%98%81%EC%97%AD-%EC%99%B8-%ED%81%B4%EB%A6%AD-%EA%B0%90%EC%A7%80

React 컴포넌트 특정 영역 외 클릭 감지

 

이 때 중요한 것은 외부라고 인식하게 하는 ref를 어디까지 줄 것인가이다! 다른 클릭이벤트와 충돌하지 않도록 신경쓸 것

  const searchInputRef = useRef<any>(null);
  const [isSearchMode, setIsSearchMode] = useState<boolean>(false); //하단 옵션리스트 등장 여부

/* 외부 영역을 클릭했을 때 검색창이 닫히도록 */
  useEffect(() => {
    function handleClickOutside(e: MouseEvent): void {
      if (
        searchInputRef.current &&
        !searchInputRef.current.contains(e.target as Node)
      ) {
        setIsSearchMode(false); 
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [searchInputRef]);
  
  
  return (
  	<SearchContainer ref={searchInputRef}>
    	....
    </SearchContainer>
  )