정적 라우팅(Static Routing), 동적 라우팅(Dynamic Routing)을 사용하여 페이지 이동하기

라우터(router)객체란 페이지 이동과 관련된 기능을 가지고 있는 객체이다
많은 기능들이 있지만 그중에서 router.push()를 사용해보자

---

라우팅을 사용하여 페이지 이동을 해보자!!

라우팅을 사용할땐

정적 라우팅(Static Routing) : 이동할 디렉토리를 직접 지정해서 이동

import {useRouter} from "next/router"

export default function StaticRoutingPage() {

  const router = useRouter()
  
  const onClickMove = () => {
    router.push("이동할 디렉토리 위치")
    console.log(useRouter);
  }
  return <button onClick={onClickMove}>페이지 이동하기!!</button>
}

위와 같이 변수.push("이동할 디렉토리 위치") 사용한다

이 정적 하우팅은 단점이 있다
바로 새로운 곳으로 이동하려면 직접 그 디렉토리를 만들어서 지정해 줘야한다

커뮤니티 사이트 같이 게시글이 계속해서 생성되는 곳이라면 직접 하나하나 디렉토리를 늘려 가면 끝이없다

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

그래서 이를 해결하는 방법이 동적 라우팅이다

동적 라우팅(Dynamic Routing) : 이동할 디렉토리에 값을 넣어 이동

import {useRouter} from "next/router"

export default function DynamicRoutingPage() {
  const router = useRouter()
  const onClickMove1 = () => {
    router.push("./mySite/ABCD")
  } 
  return (
    <div>
      <button onClick={onClickMove}>ABCD 게시글로 이동하기!</button>
    </div>
  )
}

위와 같이 했다고 해보자
동적 라우팅은 이동할 디렉토리의 위치(즉 폴더명)를 [변수명] 이렇게 만들어 줘야한다
나는 mysite/[QWER] 이렇게 만들었다 하겠다

import {useRouter} from "next/router"

export default function DynamicRoutingMovedPage() {
  const router = useRouter()
 
  return (
    <div>
      <div>{router.quert.QWER} 게시글로 이동이 완료되었습니다.</div>	
    </div>

결과는 ABCD 게시글로 이동이 완료되었습니다. 이다

즉 동적 라우팅에서 mysite/[QWER]에서 QWER이 변수명으로 작동해서 router.quert.변수명으로 이동하면 push할때 [QWER]위치에 있던 ABCD가 담겨져 있는 것이다

이걸 활용하면 커뮤니티 게시판 같이 많은 게시물도 폴더 하나로 관리가 가능하다