특정 검색페이지에서 검색하여 상세 보기 이후
뒤로가기 등의 버튼을 통해 다시 검색페이지로 돌아갔을 때
검색 Param및 Page를 유지하기 위하여 만든 Hook
기존 존재하던 라이브러리에서는 뒤로가기시에는 정상적으로 동작했지만
프로젝트를 진행하던 도중 다른 페이지에서 바로가기를 통해 상세로 바로 접근하는 경로가 생겼다.
때문에 목록으로 다시 돌아가는 버튼을 history를 -1 시키는 방법에서
route를 활용해 useNavigate로 이동하도록 변경했는데
이 방법을 사용했을 때에는 정상적으로 Param을 불러오지 못했다.
이를 해결하기 위해 상세보기시 setParamsMemory를 사용해 SessionStorage에 Param을 저장하고,
다시 해당 URL의 페이지에 돌아왔을 때 getParamsMemory를 사용해 Param이 존재한다면 Set하는 방식으로
Hook을 만들었다.
한번 호출해서 Param을 Set하면 더는 필요가 없기 때문에 removeParamsMemory를 호출해 SessionStorage에서 삭제한다.
다른 메뉴로 이동했을 경우 더는 그 Url에 해당하는 Param을 저장할 필요가 없기때문에
메뉴를 이동하는 부분에서 removeParamMemory를 호출해주면 된다.
- useParamsMemory.ts
import React from 'react';
import { useLocation } from 'react-router-dom';
const useParamsMemory = () => {
const path = 'paramsPath';
const data = 'paramsData';
const location = useLocation();
const setParamsMemory = (params:any) => {
sessionStorage.setItem(path, location.pathname);
sessionStorage.setItem(data, JSON.stringify(params));
}
const getParamsMemory = () => {
const url = sessionStorage.getItem(path);
if ( location.pathname === url ) {
const params = JSON.parse(sessionStorage.getItem(data));
removeParamsMemory();
return params;
}
}
const removeParamsMemory = () => {
sessionStorage.removeItem(path);
sessionStorage.removeItem(data);
}
return { setParamsMemory, getParamsMemory, removeParamsMemory };
}
export default useParamsMemory;
결론적으로 SessionStorage에는 최대 한개의 Param만을 저장하고 있어
저장공간 이슈는 없을 듯 하다.
Param이 너무 커지면 다르겠지만...
검색 페이지 뿐만 아니라
기타 일시적인 Param 저장이 필요한 상황이 오면 활용할 수 있을 듯 하다.