라우터(router) 객체, 정적 라우팅과 동적 라우팅

라우터(router) 객체

라우터(router) 객체란 페이지 이동과 관련된 기능을 가지고 있는 객체이다. 이 객체를 사용해서 A페이지에서 B페이지로 이동할 때, "B 페이지로 라우팅한다."고 말한다.

 

자주 사용하는 라우터 객체 기능에는 여러가지가 있다.

router.push("이동할 페이지")

router.replace()

router.pathname

등등

 

정적라우팅(Static Routing)과 동적 라우팅(Dynamic Routing)

링크/login 페이지는 누가 언제 접속해도 항상 로그인 페이지가 나온다. 이러한 페이지로 이동하는 것을 '정적 라우팅'이라고 한다. 라우팅 테이블에 경로를 수동으로 추가해야하는 프로세스로 리액트에서는 페이지를 만들 때마다 새로운 폴더와 index.js를 추가해줘야한다.

 

반대로, 게시판 상세보기와 같은 경우, 글 번호에 따라서 주소가 변경되는데 이러한 페이지로 이동하는 것을 '동적 라우팅'이라고 한다.

 

링크/board/1 : 1번 게시글 상세보기 페이지

링크/board/2 : 2번 게시글 상세보기 페이지

링크/board/3 : 3번 게시글 상세보기 페이지

링크/board/4 : 4번 게시글 상세보기 페이지

 

정적 라우팅 실전사례

//정적 라우팅 페이지

import { useRouter } from "next/router";

export default function staticRoutingPage() {
  const router = useRouter();
  const onClickMove = () => {
    router.push("/05-02-static-routed");
  };

  return <button onClick={onClickMove}>페이지 이동하기!!!</button>;
}

next에서 제공하는 useRouter를 import하고 router.push를 이용하여 "링크/05-02-static-routed"로 이동하는 함수를 만들어 버튼 클릭시 작동하게 한다.

 

페이지에는 '페이지 이동하기!!!' 버튼 하나만 있다. 이 버튼을 클릭하면 routed 페이지로 넘어가게 된다.

 

// 정적 라우티드 페이지

export default function staticRoutedPage() {
  return <>페이지 이동 완료!</>;
}

라우팅하여 이동된 곳에는 '페이지 이동 완료!' 문자만 띄어놓았다. 정적 라우팅 페이지에서 버튼을 클릭하면 정적 라우티드 페이지로 넘어가고 그 결과 '페이지 이동 완료!' 문자가 보이는 페이지를 확인할 수 있다.

 

동적 라우팅 실전사례

import { useRouter } from "next/router";

export default function dynamicRoutingBoardPage() {
  const router = useRouter();
  const onClickMove1 = () => {
    router.push("/05-06-dynamic-routed-board/1");
  };

  const onClickMove2 = () => {
    router.push("/05-06-dynamic-routed-board/2");
  };

  const onClickMove3 = () => {
    router.push("/05-06-dynamic-routed-board/3");
  };

  const onClickMove4 = () => {
    router.push("/05-06-dynamic-routed-board/4");
  };

  const onClickMove100 = () => {
    router.push("/05-06-dynamic-routed-board/100");
  };

  return (
    <>
      <button onClick={onClickMove1}>1번 게시글로 이동하기</button>
      <button onClick={onClickMove2}>2번 게시글로 이동하기</button>
      <button onClick={onClickMove3}>3번 게시글로 이동하기</button>
      <button onClick={onClickMove4}>4번 게시글로 이동하기</button>
      <button onClick={onClickMove100}>100번 게시글로 이동하기</button>
    </>
  );
}

여러 개의 버튼을 만들어서 해당 게시글로 이동을 하게 했지만 중요한 것은 5~99번 게시글도 "링크/05-06-dynamiv-routed-board/입력"를 넣으면 정적 라우팅과 다르게 게시글이 나온다.

import { useRouter } from "next/router";

export default function dynamicRoutedPage() {
  const router = useRouter();

  return (
    <>
      <div>{router.query.boardList}번 페이지 이동 완료!!!</div>
    </>
  );
}

정적 라우티드와는 달리 useRouter를 이용해야 하며 페이지를 만들 때 폴더 명에 [ 폴더명 ] 형식으로 대괄호를 입혀야 한다. 그 결과 "링크/05-06-dynamiv-routed-board/입력" "입력"에 어떤 것을 넣어도 페이지로 이동이 된다. router.query

* 참고한 글

https://nextjs.org/docs/api-reference/next/router

next/router | Next.js