useRouter of NextJS

useRouter Hook 은 Routing 할 때 주로 쓰는 Hook 이다

useRouter 에서는 router object 를 return 해주는데 보통 Routing 용으로 .push method, 페이지 스왑이 필요할 때 .replace 등을 주로 사용한다.

이러한 router.push 에서 쓸 수 있는 Argument 를 정리해보면 좋을 거 같아서 포스팅을 한다.

• 자세한 Property 및 사용법 등은 Docu 참고

router.push(url, as, options)

기본적으로 push 는 url, as, options 를 받는다.

• url : 내가 Routing 하고자 하는 URL
• as : Routing 이후, url 에 보여주고자 하는 URL
• options : Routing 시 적용되는 옵션

보통 query 를 숨기거나 기존 URL 대신 다른 URL 을 보여주고 싶을 때, as 를 적용해주는데 이 때 경로는 절대경로로 명시를 해준다.

options 에는 여러 Property 가 있는데 그 중 shallow 에 대해서 다뤄보고자 한다.

shallow 옵션은 꼭 push method 에만 있는건 아니고 replace method 에서도 쓸 수 있는 옵션인데 shallow 를 활성화하면 SSR 을 막고 CSR 로만 동작할 수 있게 만들 수 있다. 보통 query 에 Effect 걸어서 이에 대한 렌더링 로직을 작성한다고 하는데 유용하게 쓸 수 있는 예로 query 기반 Tab Component 다.
단, 사용 시 주의해야 할 점이 있는데 shallow 를 쓰는 경우 pathname 또는 URL 은 null 을 주거나 같은 페이지로 명시를 해야한다. 다른 페이지로 routing 시키는 경우 결국 Routing 하고자 하는 페이지에서 initial 되기 때문에 shallow 옵션을 주는 의미가 없어지게 된다.