shallow routing

Kingmo·2022년 4월 9일
1

1. Shallow Routing

Next.js에서는 Shallow Routing이라는 데이터 패칭 메소드를 다시 사용하지 않고 웹 사이트의 URL을 변경할 수 있게하는 기능을 제공한다.

데이터 패칭 메소드로는 getServerSideProps, getStaticProps, getInitalProps 와 같은 것들이 있다.

Shallow Routing은 next/router 라이브러리의
useRouterwithRouter으로 router객체에 접근하여
query와 같은 기능을 사용할 때 현재 상태를 잃지않고
업데이트된 pathname을 받을 수 있게 해준다.

이해를 돕기 위해 예시를 들겠다.

예전에 내가 보고 있는 페이지를 똑같이 누군가에게 보여주려
링크를 공유했다가 다른 내용이 나와 당황 했던 적이 있다.

이는 내가 브라우저에서 상호작용하여 바뀐 내용들은
공유한 url에 반영되어 있지 않기 때문에 나타나는 현상이다.

하지만 Shallow Routing이 적용된 사이트에서는 URL 파라미터에 현재 상태가
고대로 반영되기 때문에 내가 보는 내용 그~대로~ 다른사람에 보여줄 수가 있다.


2. Shallow Routing 사용하기

  • 예시
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를 보낼 필요가 없다.

profile
Developer

0개의 댓글