React Next.js 에서 URL 을 이용한 상태 유지하기: 페이지네이션, 키워드 검색, 필터링

# React Next.js 에서 URL 을 이용한 상태 유지하기: 페이지네이션, 키워드 검색, 필터링

작성중...

React Next.js 애플리케이션에서 사용자가 페이지네이션, 키워드 검색, 필터링 등을 조작할 때 해당 상태를 URL에 반영하여, 뒤로 가기 버튼을 누르거나 URL을 직접 입력해도 이전 상태가 유지되도록 하는 방법을 알아보자. ## PH

• 2024-12-31 : First posting.

## TOC ## URL 쿼리 파라미터 사용 페이지 번호, 검색 키워드, 필터 정보를 쿼리 파라미터에 저장합니다. ``` /list?page=2&limit=10&search=example&filter=active ```/ ## Next.js 의 useRouter 훅 사용 ``` import { GetServerSideProps } from "next"; import { useSearchParams } from "next/navigation"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; interface QueryParams { page?: number; limit?: number; search?: string; filter?: string; } interface PageProps { initialQuery: QueryParams; } // 초기 로딩시 router.query 도 빈 JSON 객체이고, useSearchParams() 도 빈 JSON 객체이기 때문에 getServerSideProps 에서 초기값을 설정해 주어야 함. export const getServerSideProps: GetServerSideProps<PageProps> = async (context) => { const { page = 1, limit = 10, search = "", filter = "" } = context.query; return { props: { initialQuery: { page: Number(page), limit: Number(limit), search: search as string, filter: filter as string, }, }, }; }; function QueryParamsTest({ initialQuery }: PageProps) { const router = useRouter(); const { query } = router; console.log("query", query); const [page, setPage] = useState(Number(initialQuery.page) || 1); const [limit, setLimit] = useState(Number(initialQuery.limit) || 10); const [search, setSearch] = useState((initialQuery.search as string) || ""); const [filter, setFilter] = useState((initialQuery.filter as string) || ""); useEffect(() => { router.push({ pathname: router.pathname, query: { page, limit, search, filter }, }); }, [page, limit, search, filter]); useEffect(() => { setPage(Number(query.page) || 1); setLimit(Number(query.limit) || 10); setSearch((query.search as string) || ""); setFilter((query.filter as string) || ""); }, [query]); return ( <div> <h1 className="text-2lg">Query Params Test</h1> <p className="text-lg m-4">page: {page}</p> <p className="text-lg m-4">limit: {limit}</p> <p className="text-lg m-4">search: {search}</p> <p className="text-lg m-4">filter: {filter}</p> <button className="text-lg inline-block bg-blue-700 text-white m-4 p-4" onClick={() => setPage(page + 1)} > Next Page </button> <button className="text-lg inline-block bg-blue-700 text-white m-4 p-4" onClick={() => setLimit(limit + 10)} > Increase Limit </button> <button className="text-lg inline-block bg-blue-700 text-white m-4 p-4" onClick={() => setSearch("search")} > Search </button> <button className="text-lg inline-block bg-blue-700 text-white m-4 p-4" onClick={() => setFilter("filter")} > Filter </button> </div> ); } export default QueryParamsTest; ```/ ## shallow 옵션을 활용한 성능 최적화 router.push 나 router.replace 에 shallow: true 옵션을 사용하면 페이지 전체를 다시 렌더링하지 않고 URL만 업데이트할 수 있습니다. 이를 통해 UX를 개선할 수 있습니다. ## getServerSideProps 또는 getStaticProps 사용 (선택 사항) 서버에서 초기 데이터를 가져오거나 정적 페이지를 생성할 때 URL 쿼리를 반영하도록 설정합니다. ``` export async function getServerSideProps(context) { const { page = 1, keyword = '', filter = '' } = context.query; // 쿼리를 기반으로 데이터를 가져옴 const data = await fetchDataFromAPI({ page, keyword, filter }); return { props: { data, initialQuery: { page, keyword, filter }, }, }; } ```/ ## RRA

1. velog.io/@sseung95 :: Next.js 에서 페이지 검색 결과 URL로 유지하기 (feat. window.location.search), 2024-05-22
2. gyyeom.tistory.com :: [Next.js] URL에 상태 저장하기 (useSearchParams, URLSearchParams), 2024-05-09