Vue3에서 같은 컴포넌트를 재사용하는 두 가지 라우트 갱신 문제

같은 컴포넌트를 재사용하는 라우트에서 두 가지 갱신 문제를 겪었다. 하나는 같은 상세 페이지에서 파라미터만 바꿨을 때 데이터를 다시 조회하지 않는 문제였고, 다른 하나는 서로 다른 메뉴가 같은 목록 컴포넌트를 사용해서 이전 화면의 상태가 남는 문제였다.

두 문제 모두 Vue Router가 컴포넌트 인스턴스를 재사용해서 onMounted()를 다시 실행하지 한다는 점은 같았다. 하지만 첫 번째는 현재 인스턴스를 유지하면서 데이터만 바꾸면 됐고, 두 번째는 목록의 로컬 상태까지 초기화해야 했다.

같은 상세 페이지에서 라우트 파라미터만 바뀔 때

상세 화면에서 다음 항목을 누르면 같은 페이지를 유지한 채 다음 정보를 보여줘야 했다. URL의 itemId는 바뀌었지만 같은 라우트 레코드와 컴포넌트를 사용했기 때문에 기존 인스턴스가 그대로 남았다.

/items/1에서 /items/2로 이동해도 ItemDetailView 인스턴스는 유지된다. 컴포넌트를 새로 만들지 않으므로 최초 진입 때 사용한 onMounted() 는 호출되지 않아서 데이터를 가져오지 않고 무반응이었다.

import { onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteUpdate(to => {
  const itemId = Number(to.params.itemId)

  fetchItem(itemId)
})

최초 진입의 데이터 조회는 기존 로직에서 처리하고, 같은 컴포넌트 안에서 라우트 파라미터가 바뀔 때만 onBeforeRouteUpdate 가드가 다음 데이터를 불러온다. 라우트 전환과 관련된 로직을 컴포넌트의 일반적인 반응형 상태 감시와 구분할 수 있다는 점도 이 방식이 읽기 편했다.

라우트 파라미터를 watch해서 데이터를 다시 조회할 수도 있다. 일단 watch 를 선호하지 않기도 하고, 라우트 전환으로 범위를 명확히 하고 싶어서 사용했다.

서로 다른 경로가 같은 목록 컴포넌트를 사용할 때

다른 문제도 있었다. 두 메뉴는 서로 다른 라우트 경로를 사용하지만 실제 화면은 같은 목록 컴포넌트로 구성했다.

const activeListRoute = {
  path: 'active',
  name: 'ActiveList',
  component: () => import('@/views/items/ItemListView.vue'),
}

const archivedListRoute = {
  path: 'archived',
  name: 'ArchivedList',
  component: () => import('@/views/items/ItemListView.vue'),
}

한 메뉴에서 다른 메뉴로 이동해도 ItemListView 인스턴스를 재사용했다. 이때는 컴포넌트가 가진 상태도 새 메뉴에 맞게 초기화해야 했다.

라우트 상위에 RouterView를 한 단계 두고 현재 경로를 key로 사용했다.

<!-- ItemRouterView.vue -->
<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

<template>
  <RouterView :key="route.path" />
</template>

route.path가 달라지면 자식 뷰의 key도 바뀐다. Vue는 기존 목록 컴포넌트를 재사용하지 않고 새 인스턴스를 만들며 onMounted()도 다시 실행한다.

상위 라우트와 레이아웃은 유지되므로 사이드바 같은 공통 UI는 다시 만들지 않는다. 대신 자식 목록이 가진 입력값, 스크롤 위치와 로컬 상태는 모두 초기화한다. 이 사례에서는 메뉴가 바뀔 때 목록 상태까지 새로 시작해야 했기 때문에 원하는 동작이었다.

참고한 페이지