파이어베이스를 이용한 프로젝트를 진행 중, 사용자가 뒤로가기를 하면 기존에 useInfinitiQuery로 불러왔던 게시물들이 사라지고, 다음 페이지부터의 데이터가 보여졌다.
아래 코드를 api에 넣어서 lastVisible을 초기화하는 것으로 해결했다.
export const visibleReset = () => {
lastVisible = undefined;
};물론 위 함수를 호출하는 visibleReset()을 useEffect에 넣거나, 그냥 밖에다 빼버리는 것으로는 뒤로가기 초기화를 막을 순 없었다.
사용자의 뒤로가기를 감지할 수 있는 무언가가 필요했다.
'사용자가 뒤로가기를 누른다 -> url이 바뀐다'라는 생각이 들었고, router관련 구글링을 한 결과
useRouter의 이벤트를 활용하여 해결했다.
route에는 많은 이벤트가 있지만, routeChangeComplete을 사용했다.
routeChangeComplete은 주소가 완전히 변경되면 실행되는 이벤트다.
아래 코드로 주소가 완전히 변경되면 visibleReset을 실행시켰다.
router.events.on('routeChangeComplete', visibleReset);