Vue.js는 사용자 화면을 관리하고 전환하는 Vue Router를 포함하고 있습니다. Vue Router를 사용하면 페이지 간의 전환 효과를 지정하고 사용자 경험(UX)을 향상시킬 수 있습니다. 이번 기술 블로그에서는 Vue Router의 라우터 트랜지션 효과를 커스터마이징하는 방법을 알아보겠습니다.

Vue Router 트랜지션 효과

Vue Router의 트랜지션 효과를 커스터마이징하는 방법은 매우 간단합니다. Vue Router v4 이후 버전에서는 트랜지션 효과를 정의하고 적용하는 방법이 많이 달라졌습니다. 기존의 <router-view>에서 트랜지션 효과를 적용하던 방식은 v4에선 네비게이션 가드 안에서 처리할 수 있도록 바뀌었습니다.

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return { left: 0, top: 0 };
  },
  async beforeRouteUpdate(to, from, next) {
    // 페이지 전환이 일어나기 전에 트랜지션 효과를 추가하거나 제어할 수 있음
    next();
  }
});

위 코드에서 beforeRouteUpdate 내부에 트랜지션 효과를 정의하는 로직을 추가하여 페이지 전환이 일어나기 전에 원하는 효과를 적용할 수 있습니다.

라우터 트랜지션 효과 커스터마이징 방법

기존의 <transition>의 CSS 클래스를 사용한 트랜지션 효과와 비교하면 Vue Router v4에서 트랜지션 효과를 커스터마이징하는 방법은 더 다양해졌습니다.

Vue.js 공식 문서에 따르면, 컴포넌트 기반의 트랜지션 효과를 사용할 수 있고, beforeRouteUpdate 등의 네비게이션 가드에서 손쉽게 트랜지션 효과를 커스터마이징할 수 있습니다.

컴포넌트 기반의 트랜지션 효과:

import { defineComponent } from 'vue';

export default defineComponent({
  transitions: {
    slideLeft: {
      enterClass: 'slide-left-enter',
      enterActiveClass: 'slide-left-enter-active',
      leaveClass: 'slide-left-leave',
      leaveActiveClass: 'slide-left-leave-active',
    }
  },
  // ...
});

위의 코드에서 transitions 객체 안에 페이지 전환 효과에 대한 CSS 클래스를 지정하여 커스터마이징할 수 있습니다.

결론

Vue Router의 라우터 트랜지션 효과를 커스터마이징하는 방법을 알아보았습니다. Vue Router v4에서는 트랜지션 효과를 더욱 다양하게 커스터마이징할 수 있어서 UX를 개선하고 사용자에게 더 나은 경험을 제공할 수 있습니다. 이를 통해 더 매끄러운 페이지 전환 효과를 구현하고 사용자의 시선을 사로잡을 수 있습니다.

더 자세한 정보는 Vue Router 공식 문서를 참고하시기 바랍니다.