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 을 이용하면 좋다.
