Next14에서 shallowRoute 사용하기 + usePagination 구현하기

똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @24.09.19

 

next 14 app router를 사용한 이후 shallowRoute가 없어졌다는 것을 깨달았습니다.

결국 공식문서 를 참고하여 새 hooks를 구현했습니다.

 

useShallowSearchParmas.ts

import { useSearchParams } from "next/navigation";

type MethodType = "push" | "replace";

export const useShallowSearchParams = (
  key: string,
  method: MethodType = "push"
) => {
  const searchParams = useSearchParams();
  const paramsValue = searchParams.get(key) ?? "";

  const setParamsValue = (num: string) => {
    const params = new URLSearchParams(searchParams);
    params.set(key, encodeURIComponent(num));
    if (method === "replace") {
      window.history.replaceState(null, "", `?${params}`);
    } else {
      window.history.pushState(null, "", `?${params}`);
    }
  };

  const deletePageValue = () => {
    const params = new URLSearchParams(searchParams.toString());
    params.delete(key);
  };

  return {
    paramsValue,
    setParamsValue,
    deletePageValue,
  };
};

  const { paramsValue: paramsPage, setParamsValue: setParamsPage } =
    useShallowSearchParams("page");

 

사용법은 key 값을 넘기면 그에 해당하는 값과 핸들러를 반환합니다.

이를 활용하면 SearchParam으로 관리되는 usePagination또한 구현이 가능합니다. 

 

pagination의 로직 처리는 사실 다양합니다.

항상 현재 페이지가 가운데 오는 UI가 있기고 하고

<< < > >> 각 이동 버튼에 대한 정의도 다릅니다. 

그렇다보니 위 깃 링크를 참고하여 구현사항에 맞게 내부 로직들을 수정하신 뒤 UI와 함께 구성한다면 어렵지 않게 구현할 수 있습니다.