Next.js 06. Dynamic Routes와 useSearchParams, usePathname...

영화 상세페이지 제작

오늘 사용하게 된 Hooks들은 이러하다.

useRouter, useSearchParams, usePathname

import { useRouter, useSearchParams, usePathname } from "next/navigation";

URL에 변수를 사용하는 방법은 프레임워크 답게
next.js가 간편하게 도와준다. (버전이 달라서 어려웠다.)

어제 배운 마스킹 복습

링크를 다음과 같이 하려면 아래 사진과 같게 폴더구성을 해주면 된다.

경로이름 = movies / :url변수명 = [id]

그리고 각 페이지에 맞는 영화 상세정보를 불러오기 위해
next.config.js에서 마스킹 해주었다.

API 호출과 페이지 이동이 가능해졌고,

이미 메인페이지에서 받은 영화제목을 상세페이지에 전해주기 위한 작업들을 시작한다.

나는 App Router을 사용하는 환경이었기에 useRouter에 기능이 몰려있는것이 아니고, 여러가지 Hooks로 나누어져 있었다.

우선 useRouter을 알아보자.

메인페이지에서 영화 상세페이지로 이동하기 위해 Link태그와 useRouter의 내비게이션 기능을 사용했다.

pages 환경 구버전? 에는 useRouter에 query와 pathname이 내장되어 있지만

내가 찾아본 경우엔 usePathname과 useSearchParams를 이용해야했다. (어려운길로 간 것 같다. 쉬운 방법이 있을 것?!)

먼저 변수를 사용한 링크이동은 쉬웠다.

onClick 사용시 = router.push(`movies/${movie.id}
Link태그 사용시 = href={`movies/${movie.id}`}

이동한 상세페이지에 또 다시 api를 요청할 필요가 없기에 url parameter를 이용하여 정보를 넘겨주려한다.

useRouter.pathname은 usePathname 으로
useRouter.query는 useSearchParams 로 대체된듯 하다.

원문을 참조하여 활용했다.
https://nextjs.org/docs/app/api-reference/functions/use-search-params

id는 간편한 app폴더 라우팅을 사용하여 구현하였고
영화 상세페이지에 넘겨줄 title 정보는 useSearchParams를 사용해 넘겨보았다.

    // Get a new searchParams string by merging the current
    // searchParams with a provided key/value pair
    
    const createQueryString = useCallback(
      (name, value) => {
        const params = new URLSearchParams(searchParams)
        params.set(name, value)
          return params.toString()
      },
      [searchParams]
    )

다음 createQueryString 함수를 사용해 상세페이지에 넘겨주었다.

onClick={()=>{
          router.push(`
          movies/${movie.id}
          ?
          ${createQueryString('title', movie.original_title)}
          `)
        }}

인자 사이 ? 는 수동입력ㅎㅎㅎ... 몰루몰루 (URLSearchParams:get() 메소드 참조)

마지막으로 상세페이지 출력하기

참조 : https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

export default function Page(
  { params } = { params : { id: string, title: string }}
  ){
    const searchParams = useSearchParams();
    const movieId = usePathname();
    const idd = movieId.substring(8);
    const title = searchParams.get('title');
  return(
    <>
    <h2>detail</h2>
    <p>id = {idd || 'Loading...'}</p>
    <p>title = {title || 'Loading...'}</p>
    </>
  )
}

라우터로 넘겨준 id는 pathname으로 받고
useSearchParams로 넘긴 title은 useSearchParams.get으로 받아준다.