라우팅이란?
- 라우팅: 페이지 간 이동하는 것
- 라우터: 페이지 간 이동을 해주는 것
라우터를 이용해 라우팅을 하는것이라고 이해하면 될것 같습니다.
정적 라우팅 (Static)
/home이라고 한다면 이 경로를 입력 했을때 언제 어디서든 이 페이지로 직접 지정해 돌아가는걸 정적라우팅이라고 한다.
그래서 경로를 관리하기엔 효율적이다.
우리가 일상생활에서 보는 대부분의 페이지 이동은 정적라우팅이다.
동적 라우팅 (Dynamid)
게시판 상세보기와 같은 경우 사용자가 글을 등록한다고 가정해보자 !
이때 100만명이 넘어가는 유저가 게시글 1개씩 등록해도 100만개가 넘어간다.이 갯수를 일일히 직접 지정(정적 라우팅)을 할것인가?
이러한 라우팅을 효과적으로 처리하기 위해 사용하는 것이 바로 동적 라우팅이다.
이때 동적라우팅을 진행 할 폴더 이름을 대괄호를 추가 [param]하여 동적 경로(일명 URL 슬러그, 예쁜 URL 등)를 생성하여 변수로 지정이 되면서 사용자들이 글을 몇개를 쓰든 변수에 담기기 때문에 글을 썼을때 받은 번호들이 있고 그것들이 경로를 설정해줄 필요 없이 이 변수 폴더에 담기게 되고 꺼내서 조회가 가능하다.
(이때 대괄호 안에 쓰여지는 폴더 이름은 단순히 변수명이기 때문에 어떻게 작성해도 상관이 없다.) 이러한 과정을 도와주는 것이 바로 router 객체다.
다음 페이지를 고려하십시오 pages/post/[pid].js.
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { pid } = router.query
return <p>Post: {pid}</p>
}
export default Post/post/1, 등과 같은 모든 경로는 와 /post/abc일치합니다 pages/post/[pid].js. 일치하는 경로 매개변수는 페이지에 쿼리 매개변수로 전송되고 다른 쿼리 매개변수와 병합됩니다.
Link 태그에 대해서는 데이터를 미리 불러오지않는다? 혹은 페이지 이동만 된다라고 얕게나마 알고있었는데 공식문서를 보니
<Link href="/post/abc/a-comment">
<a>Go to pages/post/[pid]/[comment].js</a>
</Link>이렇게 변수폴더를 만들어서 이동도 가능한것 같다. 한번 처음부터 복습 쫘라락할때 다시 알아보도록 하겠습니다.
