Shallow Routing

프로젝트를 하다 보면 상태에 대한 부분들이 전부 URL 값 파라미터에 반영되어야하는 경우가 있다.

이렇게 해야하는 이유는

1. 모든 사용자의 동작들이 URL로 반영이 되어야지만 내가 보고 있는 페이지 그대로 누군가에게 URL을 공유할때 받는사람도 똑같은 페이지의 똑같은 화면을 볼수 있게 된다
2. 뒤로가기를 눌렀을때 바로 이전 동작으로 되돌릴 수 있다
3. 웹에서 앱 으로 넘어갔을때 앱에서도 똑같은 페이지를 볼수 있게 해야한다

이러한 동작을 도와주는 것이 nextjs 에서 제공하는 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 파라미터 ( ex. router.query.place ) 가 바뀔때마다 setState를 해주고 다른 컴포넌트에서는 해당 state값을 prop으로 받아서 가져다 쓰면 된다.

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

이렇게 셋팅을 하면 나의 세부 동작들이 다 url에 상태값으로 바뀌면서 반영이 된다.

데이터를 담거나 중요 상태값들은 중앙 데이터로 따로 관리해줘야겠지만 작은 상태값들은 url을 이용하면 좋다.