[Vue3] Keep-Alive (비활성 컴포넌트 캐싱)

1. Keep-Alive

동적 Component 는 컴포넌트의 동적 렌더링이 필요할 때 많이 사용되고 있습니다. 하지만 활성화 된 컴포넌트에서 다른 컴포넌트로 전환 하였을 때 기존 컴포넌트의 Unmount와 동시에 데이터가 모두 소멸되는데, 다시 해당 컴포넌트로 돌아갔을 때, 이전 작업했던 내용을 유지하고자 할 때 Keep-Alive 기능을 사용합니다.

<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

2. Include / Exclude

기본적으로 KeepAlive는 모든 컴포넌트에 대하여 캐시를 생성합니다. Include / Exclude 옵션으로 캐시로 관리할 특정 컴포넌트만 지정할 수 있습니다.

<!-- 쉼표로 구분되는 컴포넌트 Name -->
<KeepAlive include="ComponentA, ComponentB">
  <component :is="view" />
</KeepAlive>

<!-- 정규식 (`v-bind`를 사용해야 함) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- 배열 (`v-bind`를 사용해야 함) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

3. <router-view/>

Vue-Router에서 Children으로 속한 Path 별 Component의 렌더링 시에는 아래와 같은 방법으로 캐싱이 가능합니다.

<router-view v-slot="{ Component }">
    <keep-alive>
        <component :is="Component" />
    </keep-alive>
</router-view>