[Next.js] 라우터(Router)객체와 동적/정적 라우팅(Routing)

라우터(router) 객체
: 페이지 이동과 관련된 기능을 가지고 있는 객체를 의미합니다.

이 라우터 객체를 사용해서, A 페이지 -> B 페이지로 이동할 때, "B 페이지로 라우팅한다" 고 말합니다.

주로 사용하는 라우터

import Router from 'next/router'

export default function Routing() {
    const handleClickPathname = () => {
        const pathname = Router.pathname
        alert(pathname)
    }

    const handleClickAsPath = () => {
        const asPath = Router.asPath
        alert(asPath)
    }

    const handleClickBack = () => {
        Router.back()
    }

    const handleClickPush = () => {
        Router.push('/')
    }

    const handleClickReload = () => {
        Router.reload()
    }

    const handleClickReplace = () => {
        Router.replace('/')
    }


    return (
      <>
        <button onClick={handleClickPathname}>현재 위치 주소: Router.pathname</button><br/>
        <button onClick={handleClickAsPath}>현재 위치 주소: Router.asPath</button><br/>
        <button onClick={handleClickBack}>뒤로가기 버튼: Router.back()</button><br/>
        <button onClick={handleClickPush}>현재 페이지에서, 다른 페이지로 이동: Router.push()</button><br/>
        <button onClick={handleClickReload}>새로고침: Router.reload()</button><br/>
        <button onClick={handleClickReplace}>현재 페이지 삭제 후, 다른 페이지로 이동: Router.replace()</button><br/>
      </>
    )
  }

정적 라우팅

누가 들어가도 항상 똑같은 화면이 나오는 페이를 정적 라우팅 을 한다고 합니다.

예를 들어 로그인 같은 페이지이죠 !

동적 라우팅

반면, 제품 상세보기와 같은 경우, 제품에 따라서 주소가 변경됩니다.

하지만, 제품이 너무 많아 버리게 되면 각각의 상품에 따라 페이지를 만들어 정적라우팅을 해주기는 어렵기 때문에 이러한 라우팅을 효과적으로 처리하기 위해서 동적 라우팅 을 사용합니다.

/product/1 ⇒ 1번 상품 상세보기 페이지
/product/2 ⇒ 2번 상품 상세보기 페이지
/product/3 ⇒ 3번 상품 상세보기 페이지
/product/4 ⇒ 4번 상품 상세보기 페이지

next.js - 동적 라우팅
next.js에서는 동적 라우팅을 제공해줍니다.

/.next
/pages
  ㄴ-- index.jsx
  ㄴ-- /product
         ㄴ-- [productNum].jsx
/public
/styles

보여주고자 하는 폴더 이름의 하위 폴더로 [productName] 폴더를 만들어 준 후 이 안에 index.js 파일을 만들어주면 동적 라우팅을 사용할 수 있습니다.

[productName] 이렇게 대괄호로 감싸준 폴더를 만들어주면 이동해주고자 하는 제품 번호가 [ ] 안에 쓰여진 변수명에 담겨져 그 변수 안에 있는 데이터를 꺼내 조회할 수 있습니다.

이 때, [ ] 안에 쓰여지는 폴더 이름은 그저 변수명이기 때문에 아무렇게나 작성해도 상관없습니다.

이러한 과정을 router 객체가 도와주는 것입니다 !

//next.js의 동적라우팅을 이용한 코드

export default function RoutingMovedPage() {
  const router = useRouter();
  console.log(router);

  const { data } = useQuery(FETCH_BOARD, {
    variables: { number: Number(router.query.qqq) },
  });
  console.log(data);

  return (
    <>
      {/* 데이터가 있으면 그리고 없으면 그리지 마 */}
      {/* 먼저, 정적인 부분을 보여주고 그 다음 데이터가 들어오면 {data.fetchBoard.~}부분을 그려준다, */}
      <div>{router.query.qqq}번 게시글 이동이 완료되었습니다.</div>
      {/* data?. : optional chaiging */}
      <div>작성자 : {data && data.fetchBoard?.writer} </div>
      <div>제목 : {data?.fetchBoard?.title} </div>
      <div>내용 : {data ? data.fetchBoard?.contents : "loding .."} </div>
    </>
  );
}