Vue3로 마스터하는 동적 라우트 전환 효과 router transition

 

 

라우트 전환의 이해

Vue.js는 싱글 페이지 애플리케이션을 구축하는 데 사용되는 프레임워크입니다. 이러한 애플리케이션은 페이지 전체를 새로고침하지 않고도 새로운 콘텐츠를 로드하고 표시할 수 있습니다. 이것은 라우트 전환을 통해 가능하며, 이는 사용자가 애플리케이션의 한 부분에서 다른 부분으로 이동할 때 발생합니다.

 

 

Vue.js의 <transition> 컴포넌트

Vue.js는 이러한 전환을 처리하기 위한 `<transition>` 컴포넌트를 내장하고 있습니다. 이 컴포넌트는 CSS 전환과 애니메이션을 적용하는 데 사용되며, 전환 이름, 타입, 지속 시간 등을 쉽게 정의할 수 있게 해줍니다.

 

 

Vue Router와의 통합

Vue Router는 Vue.js의 공식 라우팅 라이브러리입니다. Vue Router는 각 라우트 전환 시 해당 컴포넌트를 적절하게 렌더링하며, `<transition>` 컴포넌트와 결합되어 각 라우트 전환에 부드럽게 애니메이션을 적용할 수 있습니다.

 

 

예제와 실제 사용

라우트 전환은 사용자 경험을 향상시키기 위해 필수적입니다. 예를 들어, 사이드바 메뉴를 통해 다른 페이지로 이동할 때, 전환 애니메이션을 적용하면 사용자에게 애플리케이션이 자연스럽게 느껴질 수 있습니다. 이는 사용자가 어플리케이션을 더 쉽게 이해하고, 더욱 매끄럽게 사용할 수 있도록 도와줍니다.

 

 

코드 예제

우선, 간단한 두 페이지를 가진 Vue 애플리케이션을 생각해봅시다. Home 페이지와 About 페이지로 이루어진 이 애플리케이션이라면, 다음과 같은 Vue Router 설정이 필요할 것입니다.

 

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

export default new VueRouter({ routes })

 

 

이 코드는 두 개의 라우트를 정의하고 있습니다: '/' (홈 페이지) 와 '/about' (About 페이지). 이제 이 라우트를 사용하여 애플리케이션의 다른 부분 사이에서 전환할 수 있습니다.

 

하지만, 우리는 이 라우트 전환에 애니메이션을 추가하고 싶습니다. 이를 위해 Vue의 `<transition>` 컴포넌트를 사용할 것입니다. 이 컴포넌트는 이름, 진입/진출 애니메이션, 애니메이션 유형 등을 정의할 수 있습니다. 이 경우, fade 애니메이션을 적용해 보겠습니다.

 

먼저, Vue 애플리케이션의 최상위 컴포넌트 (일반적으로 `App.vue`)에서 `<transition>` 컴포넌트를 사용하여 `<router-view>` 컴포넌트를 감싸야 합니다.

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    
    <transition name="fade" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

 

이제 이 라우트 전환에 fade 애니메이션을 적용할 것입니다. 이를 위해서는 CSS를 정의해야 합니다.

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

 

이 CSS는 두 단계로 이루어져 있습니다:

1. 활성 상태(entering and leaving)에서는 투명도가 0.5초 동안 변화합니다.

2. entering 시작 상태와 leaving 끝 상태에서는 투명도가 0입니다. 

 

이제, 이 Vue 애플리케이션의 라우트 사이에서 전환하면, 각 페이지는 부드럽게 fade in / fade out하는 애니메이션 효과가 적용됩니다.

 

이처럼 Vue Router와 Vue의 `<transition>` 컴포넌트를 결합하면, 웹 애플리케이션에 부드러운 페이지 전환 효과를 적용할 수 있습니다. 이는 사용자에게 더 좋은 경험을 제공하고, 웹 애플리케이션을 더 동적이고 생동감 넘치게 만들어 줍니다. 이 기법을 통해 사용자 경험을 향상시키는 데 도움이 될 수 있기를 바랍니다.

 

 

좀 더 복잡한 예제 (화면 3개, slide)

이번에는 Vue의 `<transition>` 컴포넌트의 다양한 기능을 사용하여 slide-in, slide-out 효과와 함께 복잡한 라우트 전환을 구현해보겠습니다.

 

우리의 Vue 애플리케이션은 세 개의 페이지로 이루어져 있다고 가정합시다: Home, About, 그리고 Contact 페이지입니다. 이 페이지들 사이에서 전환될 때, slide-in, slide-out 효과가 적용되어야 합니다. 또한, 이 전환은 사용자가 뒤로 가거나 앞으로 가는 방향에 따라 다르게 적용되어야 합니다.

 

우선 Vue Router 설정은 이렇게 작성하겠습니다.

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from './views/Home.vue'
import About from './views/About.vue'
import Contact from './views/Contact.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

export default new VueRouter({ routes, mode: 'history' })

 

 

다음으로, 우리는 각 라우트 전환에 적절한 CSS 클래스를 동적으로 적용하기 위한 로직을 추가해야 합니다. 이를 위해, 우리는 Vue의 watch 속성을 사용하여 `$route` 객체를 관찰할 것입니다.

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>

    <transition :name="transitionName">
      <router-view />
    </transition>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
let transitionName = ref('slide-left')

watch(route, (to, from) => {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  transitionName.value = toDepth < fromDepth ? 'slide-right' : 'slide-left'
})
</script>

 

 

이 코드는 현재 라우트의 '깊이'를 계산하고, 이를 이전 라우트의 '깊이'와 비교하여 전환 이름을 동적으로 변경합니다. 이렇게 하면 사용자가 앞으로 나가는지 뒤로 가는지에 따라 다른 전환 효과를 적용할 수 있습니다.

 

마지막으로, 이 전환 효과를 위한 CSS를 정의해야 합니다.

.slide-left-enter-active, .slide-left-leave-active,
.slide-right-enter-active, .slide-right-leave-active {
  transition: transform .3s;
  position: absolute;
}

.slide-left-enter, .slide-right-leave-active {
  transform: translateX(100%);
}

.slide-right-enter, .slide-left-leave-active {
  transform: translateX(-100%);
}

.slide-left-leave-active, .slide-right-enter {
  transform: translateX(0);
}

 

이 CSS는 slide-left와 slide-right 전환에 대해 transform 속성을 변경하는 애니메이션을 정의하고 있습니다. 이렇게 하면, 각 페이지는 사용자가 앞으로 나아갈 때는 왼쪽에서 오른쪽으로, 뒤로 갈 때는 오른쪽에서 왼쪽으로 슬라이딩하는 효과를 보여줍니다.

 

이처럼 Vue의 `<transition>` 컴포넌트와 Vue Router를 사용하면, 사용자의 탐색 방향에 따라 동적으로 변하는 복잡한 라우트 전환 효과를 구현할 수 있습니다. 이는 사용자에게 더욱 풍부한 인터랙션을 제공하며, 더욱 동적인 사용자 경험을 만들 수 있습니다.