Front/React
React Cache Router
피고녀
2021. 11. 2. 15:37
캐시 라우터란 내가 저장하길 원하는 url에 해당하는 페이지를 dom 정보에 저장해 놓고
다음페이지로 넘어가면 캐시라우팅 한 페이지를 display:none 처리해주고
캐시라우팅 한 페이지로 다시 돌아왔을때 display:none 처리되었던 페이지를 그대로 보여주는 기능이다.
따라서 캐시라우팅 한 페이지는 componentDidMount는 동작하지만 unMount 로직은 타지 않는다.
물론 필요하다면 unMount를 타도록 설정하는 것도 가능하다.
스크롤정보, 필터정보등 다양한 정보가 해당 페이지로 돌아왔을때 남겨져 있어야 하는 요구사항이 있을 때 사용한다.
하지만 캐시라우팅에서 간혹 특정한 이유로 동작하지 않는 경우가 있다.
1. react-router-dom의 useParams를 쓰는 경우
https://github.com/remix-run/react-router/issues/6938
2. routerswitch를 쓰지 않아서 cache router가 안먹히는 경우