Angular2 RouteReuseStrategy

컨텐츠의 리스트와 뷰를 만들다 보면, 뷰에서 리스트로 돌아갔을 때 사용자가 탐색하던 위치를 다시 보여주는 것이 중요합니다. 특히 SPA의 경우, 페이지 이동이 하나의 DOM 요소안에서 이루어지기 때문에 이를 기억하고 찾아가기 쉽지 않습니다.

Angular도 마찬가지입니다. route를 써서 페이지 이동을 하다보면, history.back()으로 이전페이지로 돌아간다고 해도, 해당 위치를 찾을 수 없습니다.
route를 통해 뷰가 변경될 때, 지난 컴포넌트 인스턴스는 제거되기 때문입니다.

이런 문제는 Angular의 RouteReuseStrategy를 이용해서 해결 할 수 있습니다. RouteReuseStrategy는 route가 활성화 후 재사용 될때 커스터마이징 할 수 있는 방법을 제공합니다.
RouteReuseStrategy는 route를 나중에 재사용 하기 위해서 store에 올려둘 수 있습니다. 즉 인스턴스를 삭제하지 않고 저장해 두었다가 다시 그 route가 호출 될 때 해당 인스턴스를 다시 가져와 보여줄 수 있습니다(싱글톤).

구글 공식문서에도 나와 있는 내용이지만 다시 정리해보면, RouteReuseStrategy는 다음과 같이 생겼습니다.

class RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot) : boolean
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle) : void
  shouldAttach(route: ActivatedRouteSnapshot) : boolean
  retrieve(route: ActivatedRouteSnapshot) : DetachedRouteHandle
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) : boolean
}

자세히 살펴보면 다음과 같은 메소드들로 구성되어 있습니다.

shouldDetach(route: ActivatedRouteSnapshot) : boolean

이 route (및 해당 하위 트리)를 나중에 store에 올려 재사용하기 위해 분리할지(detached) 여부를 결정합니다.

store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle) : void

분리 된 route를 저장합니다.

shouldAttach(route: ActivatedRouteSnapshot) : boolean

route를 호출할 때 (및 해당 하위 트리)를 store에 올려둔 것으로 연결할지 여부를 결정합니다.

retrieve(route: ActivatedRouteSnapshot) : DetachedRouteHandle

이전에 저장했던 route를 검색합니다.

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) : boolean

route를 다시 사용해야하는지 여부를 결정합니다.

이 글은 추후 더 업데이트 될 예정입니다.