[Udemy Vue 완벽가이드 Section13] 187. 라우트 Leave 가드

사용자가 페이지를 떠나려 할때 호출되는 유용한 가드도 있다.

물론 한 페이지를 떠나서 다른 페이지로 이동하면 before로 시작하는 이름의 가드가 모두 호출되지만, 떠나기 직전에 기존 컴포넌트에서 어떤 코드를 실행해야 할 수도 있다.

페이지를 떠나는 액션을 거부해야 할 수도 있다.

 

 

UsersList 컴포넌트를 떠날 때마다 코드를 실행한다고 해보자.

Vue가 인식하는 unmounted 생명주기 훅을 쓰면 되는데, unmounted를 콘솔에 출력하도록 하면 Users페이지를 떠날 때마다 출력된다.

Users페이지에서 Teams 페이지로 가면 콘솔에 unmounted가 출력된다.

 

그렇지만 지금은 훅이 실행되고 나서, 즉 이동이 승인된 후(이동 후)에 실행된 거라 이동을 취소할 수는 없다.

 

어떤 경우에 떠나는 컴포넌트에서 이동을 거부해야 할까?

만약 컴포넌트에 양식이 있는데 페이지를 떠날 경우, 아직 저장되지 않은 데이터는 사라질 수 있으니 확실히 저장하라고 사용자에게 알려야 하는 경우를 가정해보자.

'Save Changed' 버튼과 데이터 프로퍼티에 changesSaved를 추가해서 이 상황을 구현해보자.

그 다음으로는 saveChanges 메서드를 추가하고 this.changesSaved는 true로 설정해보자.

saveChanges()는 Save Changes 버튼을 클릭하면 트리거되도록 바인딩하자.

<button @click="saveChanges">Save Changed</button>

data() {
  return {
    changesSaved: false,
  };
},
methods: {
  saveChanges() {
    this.changesSaved = true;
  },
},

 

changesSaved가 false인 경우, 경고 메시지를 표시해서 사용자가 실수로 페이지를 떠나지 않도록 할 거다.

페이지에 있는 양식에 데이터를 입력해 두었는데 실수로 화면을 오른쪽으로 넘겨서 입력한 데이터가 사라지거나, 마우스 뒤로가기 버튼을 실수로 누를 수도 있다.

양식에 데이터를 입력한 후에 실수로 페이지를 나가는 건 우리 모두 겪어 봤다.

내비게이션 가드를 이용하면 이런 상황을 방지할 수 있다.

컴포넌트의 구성 객체에 beforeRouteLeave 가드를 추가하면 된다.

Vue라우터를 이용 중이면 이 가드를 추가할 수 있다.

그러면 라우터가 beforeRouteLeave 가드를 호출하고 그 다음에 beforeEach와 beforeEnter 가드를 호출한다.

 

beforeRouteLeave가드에도 beforeEnter 가드처럼 to, from, next가 필요하다.

이제 이 가드가 먼저 호출된다.

console을 입력하고, next를 사용해서 이동을 승인하거나 특정한 경우에만 확인하게 할 수 있다.

if검사를 이용해서 this.changesSaved가 true인지 확인하고, true인 경우 입력 데이터가 저장되었으니 사용자가 다른 페이지로 이동할 수 있게 next()를 호출한다.

false인 경우, 사용자에게 정말로 페이지를 벗어날 것인지 물어본다. 여기서 브라우저에 내장된 기능인 confirm 함수를 호출한다.

이 함수는 내장된 경고문을 표시할 거고, 사용자는 답을 골라 버튼을 클릭해야한다.

 

결과값은 불리언이고 상수 'userWantsToLeave'에 저장한다.

next를 호출해서 userWantsToLeave를 전달한다.

경고에 대한 사용자의 응답에 따라 userWantsToLeave는 true, false가 결정된다.

만일 next(userWantsToLeave)에 true가 전달되면 상단에서 next()를 호출하는 것과 같이 이동을 승인한다.

만일 false가 전달되면 이동이 거부되고 이 페이지에 머무른다.

// UsersList.vue
beforeRouteLeave(to, from, next) {
  if (this.changesSaved) { // 변경사항 저장완료 시
    next();
  } else { // 변경사항 저장 x
    const userWantsToLeave = confirm(
      'Are you sure? You got unsaved changes!'
    );
    next(userWantsToLeave); // true시, 화면이동. false시, 현재 페이지 머무름.
  }
},

 

코드를 저장하고 Users 페이지를 새로고침하면 초깃값에 따라 changesSaved의 값은 false이다.

그래서 Save Changes 버튼을 클릭하지 않고 Teams 버튼을 클릭하면 '정말 페이지를 벗어날 것인지' 경고 메시지가 뜬다.

- '취소'를 클릭하면 Users 페이지에 그대로 남게 된다. '뒤로가기'버튼을 눌러도 경고 메시지가 떠서 이동을 취소할 수 있다.

- '확인'버튼을 클릭하면 이동이 승인되고 페이지를 벗어날 수 있다.

 

실수로 버튼을 잘못 누르면 경고 메시지가 떠서 데이터를 날리는 것을 막아주기 때문에 사용자 경험을 크게 개선할 수 있다.

물론 변경사항 저장버튼을 클릭하면 경고메시지 없이 페이지 이동이 된다.

저장 후에는 changesSaved가 true이므로.

 

 

이렇게 beforeRouteLeave 가드는 유저가 실수로 입력 데이터를 날리는 것을 방지해서 사용자 경험 개선에 유용하다.

 

다양한 내비게이션 가드를 배워봤다.

내비게이션 가드는 다양한 시점과 장소에서 실행할 수 있기 때문에 상황에 가장 잘 맞는 곳에 가드를 실행시키면 된다.

모든 이동에 가드를 실행할 수도 있고, 특정 라우트에만 실행할 수도 있다.

가드가 있으면 사용자 경험도 개선할 수 있다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.