[React Custom Hook] 수동으로 새로고침한 경우에만 특정 함수를 trigger 시키는 hook(url Params 삭제) (useDeleteUrlParamsWhenManualRefresh)

1. 수동으로 새로고침한 경우에만 특정 함수를 trigger 시키는 hook(url Params 삭제)

• 로컬스토리지와 beforeunload 이벤트 사용
• input
  • 삭제할 url parms key list
• 참조
  • How to detect refresh event in browser ReactJS
  • Window: beforeunload event
  • React | How to detect Page Refresh (F5)

 

useDeleteUrlParamsWhenManualRefresh.ts

• 코드

// input 삭제할 url parms key list

import { useEffect } from "react";
import { useSearchParams } from "react-router-dom";

export default function useDeleteUrlParamsWhenManualRefresh(paramsToDelete) {
  const [searchParams, setSearchParams] = useSearchParams();

  const setFirstLoadFlag = () => {
    localStorage.removeItem("firstLoadDone");
  };

  const deleteUrlParamsWhenManuallyRefreshed = () => {
    paramsToDelete.map((param) => {
      searchParams.delete(param);
      searchParams.delete(param);
    });
    setSearchParams(searchParams);
  };

  useEffect(() => {
    window.addEventListener("beforeunload", setFirstLoadFlag);
    if (localStorage.getItem("firstLoadDone") === null) {
      localStorage.setItem("firstLoadDone", "1");
      deleteUrlParamsWhenManuallyRefreshed();
    }

    return () => {
      window.removeEventListener("beforeunload", setFirstLoadFlag);
    };
  }, []);
}

 

 

MyComponent.tsx

• 사용하는 컴포넌트 코드

// 수동 새로고침시 필터 세팅 url params 삭제
useDeleteUrlParamsWhenManualRefresh(["detailType", "detailText"]);

 

 

• 화면