공식문서에 따르면

<aside> 📌 <KeepAlive>로 래핑된 동적 컴포넌트는 비활성화 되면, 컴포넌트 인스턴스가 파괴되지 않고 캐시된다.

</aside>

라고 세부사항에 적혀있다.

어렴풋이 어떤 뜻인지는 알겠으나 명확하게 와닿지는 않았다.

이럴때 G 선생을 활용해보자……..

1. 컴포넌트 인스턴스 유지

   일반적으로 Vue.js에서 컴포넌트가 동적으로 변경되면, 기존 컴포넌트는 파괴(destroy)되고, 새로운 컴포넌트가 생성된다. 하지만 <KeepAlive>로 래핑된 컴포넌트는 비활성화되더라도 파괴되지 않고 메모리에 유지된다.

2. 상태 유지

   유지된 컴포넌트는 그 안에 있는 모든 데이터, DOM 상태, 그리고 라이프사이클 상태를 그대로 유지한다.

   예를 들어, 컴포넌트 내의 폼에 입력한 내용이나 스크롤 위치, 또는 컴포넌트의 내부 상태(data 속성)가 그대로 보존된다.

3. 활성화 및 비활성화

   <KeepAlive>로 래핑된 컴포넌트는 활성화될 때 ‘activated’ 훅이 호출되고, 비활성화될 때 ‘deactivated’ 훅이 호출된다.

   이 훅을 통해 컴포넌트가 활성화되거나 비활성화될 때 특정 작업을 수행할 수 있다.

4. 성능 향상

   <KeepAlive>는 주로 성능 향상을 위해 사용된다.

   컴포넌트를 자주 전환하는 애플리케이션에서는 컴포넌트를 매번 생성하고 파괴하는데 드는 비용을 절감할 수 있다.

🔗 참고 링크 https://ko.vuejs.org/api/built-in-components