shallow routing

🤔 얕은 라우팅..

페이지에서 뒤로가기 버튼을 누른 적이 있을 것이다. 그럼 이전 페이지로 돌아가야하고 그 화면의 주소를 복사해서 친구에게 URL을 보냈을 때 같은 화면을 받아 볼 수 있어야한다. 이런 기능을 돕는 것이 next.js 에서 제공하는 shallow routing이다.

router.push(format({
      pathname,
      query: {
        ...query, place: query?.place ?? 
        (place || '부산'), active2: 'true', active3: 'true',
      },
    }),
    undefined, { shallow: true });

routing시 shallow옵션을 true로 해주면 새로고침 없이 url만 바뀐다.

처음엔 useState로 상태값을 만든 후 useEffect로 url 파라미터(router.query.place)가 바뀔 때마다 setState를 해주고 다른 컴포넌트에서는 해당 state값을 props로 받아서 가져다 쓰면 된다.

다른 컴포넌트에서 setState를 해야할 때 부모 컴포넌트에서 setState를 자식 컴포넌트의 props로 넘겨주는 방식이 아니라 그냥 어느 컴포넌트이던지 router.push + shallow : true 로 url만 바꿔주면 알아서 setState한 것과 동일한 효과로 전부 리랜더링이 된다.