Vue Router의 LifeCycle 이해하기
Vue.js를 통해 SPA(싱글 페이지 애플리케이션)을 만들게 된다면, 아마도 Vue Router 라이브러리를 사용할 겁니다.
간단한 웹을 만드는 경우에야 크게 문제가 되지 않지만, 규모가 있는 웹 앱을 만드는 경우에는 접근 권한을 관리하기 위해 네비게이션 가드가 필수적입니다.
이 글에서는 Vue Router의 라이프 사이클 훅에 대해 이해하여, 이 네비게이션 가드가 어떻게 작동하는지 알아보겠습니다.
들어가기에 앞서
가드에 대해 먼저 짚고 넘어가려고 합니다. Vue Router 공식 문서를 보셨다면 가드(Guard)라는 용어를 많이 보셨을 겁니다. 이 글에도 많이는 아니지만 조금씩 사용되는 용어이기도 합니다. 공식 문서에서는 뷰 라우터의 훅을 주로 다른 곳으로 리다이렉션 하거나, 또는 페이지 이동을 취소하여 네비게이션을 보호하는 데 사용되어 라이프사이클 훅을 가드라고 부른다고 합니다. 다만 여기에서는 훅과 가드라는 단어를 번갈아 사용하면 글을 읽을 때 혼란이 올 거라 예상되어 가능한 Vue.js 공식 문서와 동일하게 훅이라고 부르도록 하겠습니다.
또 이후 헷갈릴 수 있는 단어들은 공식 문서에서 어떻게 언급하고 있는 지 언급하고 있으니 이후 공식 문서를 보실 때 참고하셔도 좋습니다.
Vue Router의 라이프사이클 훅 흐름도
(클릭하면 이미지를 더 크게 보실 수 있습니다.)
beforeRouteLeave
기존에 존재하던 컴포넌트가 제거되기 전에 이 훅을 호출합니다.
이 훅은 주로 문서(게시글 등)를 저장하지 않은 상태로 다른 곳으로 이동하는 것을 방지하는 데 사용됩니다.
const Foo = {
template: `...`,
beforeRouteLeave (to, from, next) {
const answer = window.confirm('저장되지 않은 작업이 있습니다! 정말 나갈까요?');
if (answer) {
next();
} else {
next(false);
}
};
};
beforeEach
기존의 컴포넌트가 제거된 후 새로운 네비게이션이 시작될 때 이 훅을 호출합니다.
어떤 페이지에 이동하는지에 관계없이 실행되며 공식문서에서는 이를 전역 가드(Global Guards)라고 부르고 있습니다.
const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
// ...
});
beforeRouteUpdate
컴포넌트를 재사용 할 경우에만 발생하는 훅입니다.
재사용이란 예를 들어 게시판의 첫 번째 페이지 "/board/page/1"에서 다음 글 목록을 불러오기 위해 "/board/page/2"로 게시판의 페이지를 이동했습니다. 이경우 게시판 컴포넌트는 유지가 되고 내용 등 일부만 변하겠지요. 이 다시 사용되는 컴포넌트를 재사용이라 부릅니다.
이렇게 재사용되는 컴포넌트가 있을 경우에 발생하는 훅입니다.
const Foo = {
template: `...`,
beforeRouteUpdate (to, from, next) {
// ...
},
};
beforeEnter
이동하려는 라우트에 진입하기 전 호출되는 훅입니다.
beforeEach와의 차이점은 beforeEnter은 라우트마다 각각 다르게 가드를 지정할 수 있습니다.
공식 문서에서는 이를 라우트 설정(route config)라고 부릅니다.
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
beforeRouteEnter
새로운 컴포넌트를 만들기 전 호출되는 훅입니다.
아직 컴포넌트를 만들기 전 이므로 컴포넌트를 this로 접근할 수 없습니다. 이때 객체(instance)에 접근하고자 할 경우에는 beforeRouteEnter의 인자로 주어지는 next 함수에 콜백을 이용하여 접근할 수 있습니다.
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// ...
},
};
beforeResolve
네비게이션 작업을 완료하기 전에 호출되는 훅입니다.
beforeEach와 비슷하게 어떤 페이지에 이동하는지에 관계없이 실행되는 전역 가드입니다.
const router = new VueRouter({ ... })
router.beforeResolve((to, from, next) => {
// ...
})
afterEach
네비게이션 작업이 완료된 후 호출되는 훅입니다.
다른 훅들과 달리 네비게이션 작업이 완료된 후 이므로, 네비게이션 작업에 영향을 미칠 수 없습니다.
공식 문서에서는 afterEach는 가드라고 표현하지 않고, 단순 훅으로만 부르고 있습니다.
router.afterEach((to, from) => {
// ...
})
돔(DOM) 업데이트 이후
beforeRouterEnter에서 next함수에 콜백을 걸어뒀다면, 그 작업은 돔이 업데이트되고 난 이 시점에 실행됩니다.
참고
글에 추가를 원하는 사항이 있으시거나, 잘못된 부분을 발견하셨다면 댓글을 남겨주시거나 메일을 보내주시면 확인 후 수정하도록 하겠습니다.
최초 발행일 2019-03-10
마지막 수정일 2020-05-24