Router Hook

router.push()

• 이전 글에서 router.push(`/movies/${id}`) 형태로 훅을 사용해 보았습니다.

• router.push hook 의 전달인자로 문자열이 아닌 객체를 넘겨줄 수 있습니다.

  • query params 와 path params 를 나눠주기 위해
  • 코드 예시

  // /pages/index.js
  
  router.push({
    pathname: `movie/${id}`,
    query: {
      title: "potatos",
    }
  })

  • 동작 예시 (url)
    

• 브라우저의 URL 을 마스킹할 수 있습니다.

  • 보통 query-parmas 를 굳이 유저에게 보여줄 필요 없다고 생각할때 사용합니다.

  • router.push({}, url, ...) 두번째 인자인 "as" 에 url 을 문자열로 입력해 줍니다.

    • 코드 예시

      // /pages/index.js
      
      router.push({
        pathname: `movie/${id}`,
        query: {
          title: "potatos",
        }
      }, `movie/${id}`)

    • 동작 예시 (url)
      

• /pages/movies/[].js 파일에선 useRouter() 를 사용해서 받은 router 정보에 query parmas 정보가 그대로 있습니다.

  • 데이터 플로우는 그대로인 상태에서 클라이언트에 보이는 url 만 마스킹된 상태

  • 코드 예시

    // /pages/index.js
    
    ...(생략) 
    const onClick = (id, title) => {
      router.push(
        {
          pathname: `movies/${id}`,
          query: {
            title,
          },
        },
        `movies/${id}`
      );
      ...(생략)
      
     // /pages/movies/[].js
     
     import { useRouter } from "next/router";
    
     export default function Details() {
         const router = useRouter();
         console.log(router);
         return "detail";
     }

  • 콘솔 예시
    

API 사용 실제 화면 구성

기본적인 형태 (특정상황 에러 발생)

• 코드 예시

// /pages/movie/[].js

import { useRouter } from "next/router";

export default function Details() {
  const router = useRouter();
  // console.log(router);
  return (
    <div>
      <h4>{router.query.title || "Loading..."}</h4>
    </div>
  );
}

• 정상 동작

  • / 에서 영화 클릭하여 url 이 변경될 시 정상 동작

• 에러 발생

  • / 에서가 아닌 외부 url 에서 바로 넘어올 경우 router.query.title 이 없으므로 "Loading..." 메세지가 렌더링됩니다.

• 홈페이지에서 상세페이지로 넘어올때만 router.query.title 존재

마치며

• Router Hook 을 사용해 url 을 마스킹하고 API의 파라미터들을 넘겨주는 것이 좋긴하지만 외부에서 상세페이지 접속시 API 파라미터를 제대로 받아올 수 없기 때문에 상황에 따라서 잘 사용해야하겠습니다.
• 다음 글에서 Catch All URL 을 사용하여 외부에서 상세 페이지 접속시 API 파라미터를 잘 받아올 수는 방법에 대해 포스트 하겠습니다.

참조

노마드코더 NextJS 시작하기