[Vue] keep-alive

Vue3에서 keep-alive는 컴포넌트의 상태를 보존하고 재사용할 수 있게 해주는 내장 컴포넌트다.
이 기능을 사용하면 Vue 인스턴스의 상태를 유지하면서 컴포넌트를 비활성화하고, 나중에 다시 활성화할 수 있다.
keep-alive는 성능 최적화에 유용하며, 특히 사용자가 여러 페이지 간에 이동할 때 컴포넌트의 상태를 유지해야 하는 경우에 매우 효과적이다.

keep-alive의 기능

• 컴포넌트 상태 보존: keep-alive는 내부에 포함된 컴포넌트의 상태를 메모리에 보존한다. 이를 통해 사용자가 컴포넌트를 다시 방문할 때 이전 상태를 그대로 복원할 수 있다.
• 성능 최적화: 컴포넌트를 매번 새로 생성하는 대신 재사용함으로써 렌더링 성능을 향상시킨다.
• 라이프 사이클 훅 활용: keep-alive를 사용하면 컴포넌트가 활성화되거나 비활성화될 때 추가적인 라이프 사이클 훅(activated와 deactivated)을 활용할 수 있다.

사용 사례

• 탭이나 페이지 이동 시, 각 탭의 상태를 유지하고 싶을 때.
• 데이터를 불러오는 데 시간이 많이 소요되는 컴포넌트의 상태를 유지하고 싶을 때.

예시 코드

<template>
  <keep-alive>
    <ComponentA v-if="currentTab === 'A'" />
    <ComponentB v-if="currentTab === 'B'" />
  </keep-alive>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const currentTab = ref('A');
</script>

이 예시에서는 ComponentA와 ComponentB가 keep-alive로 감싸져 있다. 사용자가 탭 사이를 전환할 때, 각 컴포넌트의 상태는 keep-alive에 의해 보존되므로, 탭으로 다시 돌아왔을 때 이전 상태가 유지된다.

결론

keep-alive는 Vue 애플리케이션에서 컴포넌트의 상태를 보존하고 재사용하는 데 매우 유용하다.