Vue Router

vue Router와 keep-alive 를 이용한 동적 컴포넌트 캐싱

초기 문제 해결

화면과 같이 프로젝트 id에 따른 project정보를 렌더링해주기 위해 projectId를 parameter로 갖는 라우터를 설정했습니다. ex) project/1, project/2

그러나 vue Router에서는 네비게이션 가드에 의해 params 변경에 따른 리렌더링이 되지 않았습니다.

이에 라우터의 beforeRouteUpdate 라이프사이클을 활용해 parameter 변화를 감지하고 data를 fetch하는 로직을 추가했습니다.

beforeRouteUpdate(to, from, next) {
    this.fetchCurrentProject(to.params.projectId);
next();
  },

그러나 여기서의 문제점은 한번 방문한 컴포넌트를 재방문할 경우에도 data fetch를 매번 해온다는 것입니다.

컴포넌트 캐싱

또 다른 방법으로 router에 key값을 부여하면 parameter에 따라 다른 컴포넌트로 간주된다는 것을 알게 되었고, keep-alive라는 엘리먼트를 통해 컴포넌트를 감싸면 해당 컴포넌트의 인스턴스가 캐싱된다는 것을 알게 되었습니다.

<keep-alive>
  <router-view key="$route.params.projectId"></router-view>
</keep-alive>

keep-alive를 활용하면 컴포넌트가 destroy되지 않고 active에서 inactive 상태로 전환되어 재방문시에도 다시 created를 거치지 않고 캐싱됩니다.

이를 통해 최초 route 방문시에만 data fetch를 해오고 컴포넌트의 인스턴스를 캐싱하여 리렌더링을 방지하고 API 호출 횟수를 감축했습니다.