ref로 특정영역 바깥 클릭 감지하기

프로젝트 진행중, 토글과 같은 boolean타입의 여러 component에 대해 그 바깥영역을 클릭했을 때 작동되는 함수를 만들고 싶어졌다. vanilla javascript에서는 jquery를 활용에 구현했던 기억이 있었지만, react에서는 dom에 접근할 때 ref를 사용하여야 한다. 그래서 구글을 뒤젹 거렸고 생각보다 빠르게 정답을 알았다.

 <MiddleContainer ref={container}></MiddleContainer>

내가 원하는 즉, component 안 영역에 ref를 할당한다.

  useEffect(() => {
    window.addEventListener("click", closeDropDown);
     return () => {
      window.removeEventListener("click", closeDropDown);
    };})

그 다음 useEffect로 window event를 만든다.

const closeDropDown: any = useCallback(
    (e: any) => {
      if (!container.current.contains(e.target)) {
        setToggle((state) => false);
      }
    },
    [toggle]
  );

마지막으로 영역 밖을 클릭했을 때 실행할 함수를 작성해준다.
본 코드는 화면을 클릭하였을 때 내가 선언한 component 안에 클릭한 이벤트가 존재하는지에대한 유무에 따라 toggle을 변경해주는 함수이다.
즉, container가 ref로 존재하는 component(middleContainer)가 현재 클릭한 요소 (e.target)을 가지고 있는가?? 로 해석할 수 있다.