정적/동적 라우팅

1. 라우터 객체와 라우팅

라우터(router) 객체란, 페이지 이동과 관련된 기능을 가진 객체이다. 라우터 객체를 사용해서 페이지A에서 페이지B로 이동할 때, ‘B페이지로 라우팅한다’고 한다. (router가 객체이기 때문에 router.push()와 같이 메서드를 사용할 수 있는 것이다!)

• 참고! 자주 사용하는 라우터 객체 기능

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 />
    </>
  );
}

1.1. 정적 라우팅과 동적 라우팅

• 정적(static) 라우팅 /login 페이지는 누가 언제 접속해도 항상 로그인 페이지가 나온다. 이런 페이지로 이동하는 걸 ‘정적 라우팅한다’고 말한다.

• 동적(dynamic) 라우팅 반면, 게시판 상세보기와 같은 경우에는 글 번호에 따라 주소가 변경된다. 그런데 게시글이 1억 개라면 1억 개의 페이지를 만들어야 할까? 그건 너무너무 힘들기 때문에 이러한 라우팅을 효과적으로 처리하기 위해 ‘동적 라우팅’을 사용한다.

• /board/1 ⇒ 1번 게시글 상세보기 페이지
• /board/2 ⇒ 2번 게시글 상세보기 페이지
• /board/3 ⇒ 3번 게시글 상세보기 페이지
• /board/4 ⇒ 4번 게시글 상세보기 페이지

이렇게 이동하는 것을 ‘동적 라우팅한다’고 말한다.

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

대괄호로 감싸준 폴더를 만들어주면 이동해주려는 페이지 혹은 게시글 번호가 대괄호 안에 쓰인 변수명 안에 담겨져서 그 변수 안에 있는 데이터를 꺼내 조회할 수 있다. (즉, 대괄호 내의 폴더명은 변수명이라 아무거나 상관 없다는 뜻!) 이러한 과정을 라우터 객체가 도와준다.