Routing

라우터 객체와 라우팅

라우터(router) 객체란 페이지 이동과 관련된 기능을 가지고 있는 객체입니다.

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

Next.js 에서는 라우터를 사용하려면 useRouter 훅을 사용해서 router 객체에 접근할 수 있습니다.

예시

import { useRouter } from 'next/router'

export default function RouterPage() {
	const router = useRouter()
    
    return (
    	<button onClick={() => router.push("/")}>페이지 이동 버튼</button>
    )
}

router.push 이외에도, router.replace, router.prefetch, router.beforePopState, router.back, router.reload, router.events 등 여러가지가 있습니다.

router.push vs router.replace

router.push는 라우터의 history 스택 제일 위에 새로운 url을 쌓는 것입니다.

router.replace는 스택 제일 위에 있는 원소를 새로운 url로 바꾸는 것입니다.

ex) 로그인 후 마이페이지로 이동했을 때, 뒤로가기 버튼을 누르면 다시 로그인 페이지로 가지 않기 위해 url을 히스토리에서 제거할 때 replace 사용!

router.back

히스토리에서 전 단계로 이동합니다. 브라우저에서 뒤로 가기 버튼을 누른 것과 동일하게 동작합니다.

window.history.back() 과 동일합니다

정적라우팅과 동적라우팅

정적라우팅

/login 페이지는 누가 언제 접속해도 항상 로그인 페이지가 나올겁니다. 이러한 변동이 없는 페이지로 이동하는 것을 "정적 라우팅" 이라고 합니다

동적라우팅

게시판을 예를 들면, 글 번호에 따라서 주소가 변경될 것입니다.
board/1
board/2
board/3...

하지만 이러한 경우 게시글이 1000개, 10000개가 되어버리면 각각의 글 번호에 따라 페이지를 만들어 정적라우팅을 하기는 어렵기 때문에 효과적으로 처리하기 위해 동적 라우팅을 사용합니다

Next.js에서는 동적 라우팅을 제공해주는데 폴더 이름의 하위 폴더, 파일을 [] 대괄호로 묶어주어 만들면 동적 라우팅을 사용할 수 있습니다.

대괄호로 감싸준 폴더, 파일은 이동해주고자 하는 페이지 번호, 게시글 번호등이 대괄호 안에 쓰여진 변수명에 담겨져 그 변수 안의 데이터를 조회할 수 있습니다. 이러한 과정을 router 객체가 도와줍니다.