useRef로 컴포넌트 외 영역 클릭 감지

결과물

useRef를 사용하여 드롭다운 창을 열고 그 외의 영역을 클릭 했을 때, 드롭다운 창이 닫히게 해보자

const componentRef = useRef(null);

useEffect(() => {
  function outsideCLick(event) {
    // 현재 document에서 mousedown 이벤트가 동작하면 호출되는 함수입니다.
    if (
      componentRef.current &&
      !componentRef.current.contains(event.target)
    ) {
      console.log(`div 외부 클릭을 감지!`);
      setDropDownFlag(false); // 창이 열리고 닫히는 boolean 상태값 (false => 닫힘)
    }
  }
  document.addEventListener("click", outsideCLick);
  return () => {
    document.removeEventListener("click", outsideCLick);
  };
}, [componentRef]);

<div ref={props.componentRef}>
  <Header.DropDownBtn onClick={props.onClickDropDown}>
    GAMES
    {/* 드롭다운 버튼 아이콘 */}
    {!props.dropDownFlag ? (
      <AiFillCaretDown
        style={{ height: "15px", paddingTop: "4px" }}
        />
    ) : (
      <AiFillCaretUp
        style={{ height: "15px", paddingTop: "4px" }}
        />
    )}
  </Header.DropDownBtn>
  {/* 드롭다운 시, 내려오는 창 (컴포넌트) */}
  <DropDownWindow
    dropDownFlag={props.dropDownFlag}
    setDropDownFlag={props.setDropDownFlag}
    />
</div>

클릭을 해도, 외부 클릭으로 허용하고 싶지 않는 컴포넌트에 ref를 걸어주면 끝!

• ref를 걸어준 외의 영역을 클릭 했을 때, 이벤트가 발생한다.