[Next.js] useRouter 의 Shallow Routing

참고자료

https://post.naver.com/viewer/postView.nhn?volumeNo=29116858&memberNo=10070839 

https://velog.io/@diclfn42/Next.js-Shallow-routing-%EC%9D%B4%EB%9E%80

https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating

---

시작하기 앞서

상태에 대한 부분들을 URL 값 파라미터에 반영되는 방식을 구현하고자 했다.

이렇게 했을 때 장점은 아래와 같다.

• 모든 사용자들의 동작들이 URL 파라미터로 기록된다.
• 그래서, 그 URL을 누군가에게 공유했을 때, 내가 보고있었던 페이지 그대로 볼 수 있을 것이다.
• URL 파라미터값은 브라우저 히스토리에 기록되므로, 브라우저 뒤로가기시 바로 이전동작으로 되돌릴 수 있다.

요약하자면, 웹사이트에서 사용자의 동작을 누군가에게 공유할 수 있고, 이전 동작과 이후 동작을 깔끔하게 이동하고 싶다면

URL 파라미터를 이용하면 된다.

 

이것을 도와주는 것이 next.js 에서 제공하는 shallow routing 이다.

---

Shallow Routing

새로고침을 하지않고 url을 불러올 수 있는 기능이다.

useEffect(() => {
	router.push('/?counter=10', undefined, {shallow:true})
}, [])

새로고침 없이 URL을 바꿔준다.

위의 코드는 새로고침없이 현재 URL의 `counter` 파라미터에 10을 넣는 동작이라 이해하면 된다.

 

  useEffect(() => {
  }, [router.query.counter])

파라미터값이 변경될 때 마다 리렌더링된다.

파라미터의 배열을 의존성 배열에 넣어주면, `counter` 값을 state로 관리하지 않아도 query의 `counter` 값에 의존한 로직을 짤 수 있다.