shallow routing

• shallow routing 은 새로고침 하지 않고 url을 불러올 수 있는 next/js의 기능이다.
• Next.js에서 데이터 패칭 메소드를 다시 사용하지 않고 웹 사이트의 URL을 변경할 수 있게하는 기능 제공이라고 이해하면 된다 !
• 데이터 패칭 메소드로는 getServerSideProps, getStaticProps, getInitalProps 와 같은 것들이 있지만, Shallow Routing은 next/router 라이브러리의 useRouter나 withRouter으로 router객체에 접근하여 query와 같은 기능을 사용할 때 현재 상태를 잃지않고 업데이트된 pathname을 받을 수 있게 해준다.

import { useEffect } from 'react'
import { useRouter } from 'next/router'
// 현재 URL : '/'
export default function Page() {
  const router = useRouter()
  useEffect(() => {
    // mount 이 후 이동할 url
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])
  useEffect(() => {
  }, [router.query.counter])
}

• 이렇게 shallow를 true로 , useEffect에 파라미터를 의존성 배열로 넣으면
  파라미터 값이 바뀔 때마다 리렌더링 되어 useState를 사용하지 않고 동일한 효과를 낼 수 있다!

• 또한 다른 컴포넌트에 값을 넘겨줄 때도 useRouter의 사용만으로
  router객체에 저장된 counter를 받아 쓸 수 있어
  데이터를 상위 컴포넌트에서 하위 컴포넌트로 props를 보낼 필요가 없다.