Shallow Routing

얕은 라우팅
얕은 라우팅을 사용하묜, 데이터 가져오기 매소드를 다시 실행하지 않고도 URL을 변경할 수 있다.

얕은 라우팅을 활성화 하려면 useRouter를 사용하면서 shallow 옵션을 true로 하면,
새로고침 없이 url만 바뀐다.
뒤로가기를 눌렀을때, 바로 이전 동작으로 되돌릴 수 있다.

페이지는 교체되지 않고, 경로의 상태만 변경된다.
얕은 라우팅 은 현재 페이지의 URL 변경 에만 작동한다.

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

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

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

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

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

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

이렇다는데... 잘모르겠다. 뒤로가기를 구현하고 싶었는데, 힌트가 될듯!!