React useEffect

useEffect(() => {
  console.log('Effect');
  const handleClickOutside = (event) => {
    if (
      selectBoxRef.current &&
      !selectBoxRef.current.contains(event.target)
    ) {
      setIsOpen(false);
    }
  };

  document.addEventListener('mousedown', handleClickOutside);

  return () => {
    console.log('Cleanup');
    document.removeEventListener('mousedown', handleClickOutside);
  };
}, []);

useEffect를 사용해 컴포넌트의 첫 렌더링(마운트) 시점에 document에 mousedown event를 등록하고, 컴포넌트가 DOM에서 제거되는 언마운트 시점에 등록한 event를 제거합니다.

그럼 위 코드를 실행한 후 콘솔 창에는 Effect만 출력되어야 하는데, 결과는 다음과 같습니다.

이것은 React 개발 모드의 StrictMode 때문입니다.

StrictMode는 컴포넌트를 마운트, 언마운트 후에 다시 마운트하여 사이드 이펙트의 발생 가능성을 검사합니다. 만약 cleanup 함수를 리턴하지 않았다면 Effect만 두 번 출력될 것이고, 이것은 eventListener가 중복 등록되는 사이드 이팩트에 해당합니다.