[React/Typescript] React 커스텀 훅으로 페이지 새로고침 방지

웹 어플리케이션에서 양식 작성 중이거나 중요한 작업 수행 중에 실수로 페이지를 새로고침하여 진행 현황을 잃는 경우가 있다.

스마트폰으로 사용 시 위로 올리다가 새로고침 되는 경우도 다반사이다. 이러한 문제에 대한 해결책으로 usePreventRefresh라는 커스텀 훅을 생성하여 새로고침을 방지해보려고 한다.

 

const usePreventRefresh = () => {
  const preventClose = (e: any) => {
    e.preventDefault();
    e.returnValue = '';
  };

  // 브라우저에 렌더링 시 한 번만 실행하는 코드
  useEffect(() => {
    (() => {
      window.addEventListener('beforeunload', preventClose);
    })();

    return () => {
      window.removeEventListener('beforeunload', preventClose);
    };
  });
};

 

react 훅의 형태는 이 형태이다.

 

useEffect를 사용하여, 브라우저 렌더링 시 한번만 event가 추가되도록 하여, 새로고침에 대한 이벤트가 발생 했을 경우 preventClose 함수를 통하여 새로고침 이벤트를 정지 시킨다.

 

이벤트가 발생 후에는 return을 통하여 기존에 추가한 이벤트를 삭제시켜주어야 한다.

 

이와 같은 react 훅은 

import React, { useEffect } from 'react';
import usePreventRefresh from './usePreventRefresh';

const YourComponent = () => {
  usePreventRefresh();

  // ... 컴포넌트의 나머지 코드
};

 

간단하게 component에 추가하는 것만으로도 동작된다.

 

필요에 따라, react 훅 내부 함수에 코드나 동작을 추가함으로써, 새로고침 시 다른 기능이 동작되도록 추가할 수도 있다.