[React] 웹 페이지 복귀, 이탈 탐지 (가시성)

웹 페이지 복귀와 이탈 이벤트 설정 방법

배경

React 프로젝트를 하던 중 웹 페이지 이탈과 복귀 시점에 특정 작업을 수행해야하는 상황이 있었다.

해결 방법

웹 페이지 이탈, 복귀에 대한 이벤트는 `window`객체에 내장된 `visibilityState`를 활용하여 구현할 수 있다. React 프로젝트에서는 `useEffect` Hook을 사용해서 컴포넌트 생명 주기에 따른 이벤트 처리가 필요하다. 자세한 방법은 다음과 같다.

  useEffect(() => {
    function handleVisibilityChange() {
      // 페이지 복귀
      if (document.visibilityState === 'visible') {
        console.log('복귀');
      }

      // 페이지 이탈
      if (document.visibilityState === 'hidden') {
        console.log('이탈');
      }
    }

    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      // 메모리 누수 방지
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

결론

대시보드나 주식 차트 등의 실시간 정보를 다루는 웹 페이지에서 이와 같은 이벤트 처리가 필요할 것으로 보이며, 비교적 간단하게 구현할 수 있다.