Static, Dynamic 라우팅 (정적 / 동적 라우팅)

next/router에 포함된 useRouter, 그 안에 페이지를 이동시키는 push 기능을 알아보자

 

우리는 홈페이지에 접속하게 되면 수많은 버튼을 클릭하여 원하는 페이지로 이동한다.

HTML이나 CSS로 버튼을 만들거나 활성화 시킬 수 있지만 이동하기는 어렵다.

 

이때 JS로 useRouter의 push 기능을 두가지 방법으로 사용할 수 있다.

 

1. 정적 라우팅

함수 실행시 push한 링크로 페이지를 이동시킬 수 있다. 

 

const router = useRouter;

const onClickCreateMutation = () => {
     router.push("http://localhost:3000/page/number/1")

 

onClickCreateMutation 함수가 적용된 버튼을 클릭시 위 페이지로 이동하며 빨간색은 생략이 가능하다.

정적라우팅의 단점은 링크를 수정하려면 매번 코드를 직접 수정해야한다는 단점이 있다.

 

2. 동적 라우팅

정적라우팅과 사용 방법은 동일하지만, 링크에 변수를 적용할 수 있다.

 

const router = useRouter;

const onClickCreateMutation = () => {
     router.push(`http://localhost:3000/page/${router.query.파일명}`)

 

query는 useRouter의 변수는 router에 담긴 기능이며, 파일명은 []로 감싸서 사용할 수 있다.

파일명을 [ ] 로 감싸면 router.query에 해당 값이 자동으로 입력되며, 이 값은 변수로 나중에 다양하게 활용 가능하다. 

(API 를 불러오는 number값이나 ID값의 variables로 활용 가능)

 

CreateProduct 할때와 UpdateProduct할때 서로 다른 링크로 이동시킬 수 있다.