페이지를 이동시키자 Routing!

Router(라우터)

라우터란 객체로 페이지 이동과 관련된 정보를 가지고 있다. 라우터 객체를 이용해서 A페이지에서 B페이지로 이동할때 B페이지로 라우팅 한다 라고 말한다.

정적 라우팅과 동적 라우팅

정적 라우팅은 URL 고정되어 있는 URL의 주소로 페이지 이동을 시켜주는 경우를 말한다.

로그인 버튼 클릭 => www.URL.com/login 이동

동적 라우팅은 URL의 주소가 계속 달라지는 페이지로 이동을 시켜주는 경우를 말한다.

게시글 클릭

=> www.URL.com/page/number/1

=> www.URL.com/page/number/2

=> www.URL.com/page/number/3

next.js에서의 Router의 사용

아래와 같이 임포트 후에 사용할 수 있다.

import { useRouter } from 'next/router'

router의 사용

const router = useRouter()
router.push('이동할 경로') // 정적 라우팅
router.push(`이동할 경로/${동적으로 변할 부분}`) // 동적 라우팅

동적 라우팅을 하는 경우

/page/number/[폴더명] 경로의 폴더명을 대괄호로 감싸주면 하나의 페이지로 데이터만 바꾸면서 보여줄 수 있다.