[Nuxt] keep-alive 사용방법과 주의점

📱테스트 환경

"nuxt": "^3.11.2"
"vue": "^3.4.21"
"vue-router": "^4.3.0"

---

Tap 이동을 위해 Tap 구조를 만들고 이동하고 있었지만

Tap 을 이동할때마다 데이터를 다시불러오고 초기화면으로 돌아가는게 맘에 안들었다.

이를 어떻게 하면 좋을까 생각하던 와중에 keep-alive 라는게 있다는 걸 알았다.

// ChatGPT
keep-alive 는 Vue.js에서 제공하는 내장 컴포넌트로, 비활성화된 컴포넌트의 상태를 유지합니다.

주로 탭 인터페이스나 라우터 뷰와 같이 컴포넌트를 자주 전환하는 경우에 사용됩니다.

keep-alive 로 감싼 컴포넌트는 비활성화되더라도 DOM에서 제거되지 않고 활성화될 때 이전 상태를 그대로 유지

이렇게 좋은게 있다면 써야겠단 생각으로 다음과 같이 작성하면 큰일난다.

<article v-show="activeTab === 1">
    <keep-alive>
		<Contract v-if="activeTab === 1" />
    </keep-alive>
</article>
<article v-show="activeTab === 2">
    <keep-alive>
		<Product v-if="activeTab === 2" />
    </keep-alive>
</article>
<article v-show="activeTab === 3">
    <keep-alive>
      <Option v-if="activeTab === 3" />
    </keep-alive>
</article>
<article v-show="activeTab === 4">
    <keep-alive>
      <Category v-if="activeTab === 4" />
    </keep-alive>
</article>

이렇게하면 하다보면 에러가 발생하는데

이때문에 렉걸린것마냥 페이지 이동도안돼고 아무것도 안나온다.

TypeError: Cannot read properties of null (reading 'insertBefore')

이게 너무 광범위해서 특정 에러 위치를 찾기가 힘들다보니

삽질을 많이 했는데 찬찬히 삽질하다 보니 keep-alive 가 문제였다는 걸 알 수 있었다.

keep-alive 를 v-if 와 함께 사용하면 문제가 되는 거였고

:is 를 사용하여 최상위에 배치시켜야 한다는 점이였다.

<keep-alive>
	<component :is="currentTabComponent" />
</keep-alive>

<script>
const currentTabComponent = computed(() => {
    switch (activeTab.value) {
    case 1:
      return Contract;
    case 2:
      return Product;
    case 3:
      return Option;
    case 4:
      return Category;
    default:
      return null;
    }
});
</script>

진짜 개발은 하면 할수록 어려운 것 같다는 느낌을 받는 하루였다 ..

너무 겉핥기식으로 가져다 쓰면 결국 문제가 발생하니

꾸준한 공부가 필요한데 .. 나는 노는게 좋은데 어쩌면 좋을까 ㅠ