[vue-router] Data Fetching

이번 포스트에서는 라우트가 활성화 될 때 서버에서 데이터를 가져오는 2가지 방법에 대해 이야기 할 것입니다.

첫번째 방법은, 네비게이션이 된 후 데이터를 가져오는 방법 입니다.
네비게이션을 먼저 동작하고, 활성화 된 라우트 컴포넌트의 라이프 사이클 훅에서 데이터를 가져오는 방법입니다. 데이터를 가져오는 동안에 로딩 상태를 표시합니다.

두번째 방법은, 네비게이션이 되기 전 데이터를 가져오는 방법입니다.
컴포넌트 내부 가드를 사용하여 네비게이션 되기 전에 데이터를 가져오는 방법입니다. 데이터를 가져오는 것이 끝나면 네비게이션이 동작합니다.

1. 네비게이션이 된 후 데이터 가져오기

이 방법은 즉시 네비게이션이 된 후, 컴포넌트가 렌더링 되어 컴포넌트의 라이프 사이클 훅인, created 훅에서 데이터를 가져오는 방식입니다. 이 방법은 네트워크를 통해 데이터를 가져오는 동안 로딩 상태를 나타낼 수 있는 기회를 제공합니다. 또한 각각의 view에서 다른 로딩 처리를 할 수도 있습니다.

$route.params.id를 사용하여 데이터를 가져오는 Post 컴포넌트 예제를 만들어 보겠습니다.

<template>
  <div class="post">
    <div v-if="loading" class="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // fetch the data when the view is created and the data is
    // already being observed
    this.fetchData()
  },
  watch: {
    // call again the method if the route changes
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace `getPost` with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

위의 예제는 컴포넌트가 렌더링 되어, created 훅에서 $route.params.id를 이용하여 데이터를 가져오는 예제입니다. watch 옵션에 $route를 등록하여, 라우트가 변경 되었을 때 다시 데이터를 가져올 수 있도록 만들었습니다. 데이터를 가져오는 동안에는 this.loading이 true가 되고, 데이터 가져오는 것이 완료되면 false가 됩니다.

2. 네이게이션이 되기 전에 데이터 가져오기

이 방법은 새로운 라우트가 활성화 되기 전에 데이터를 가져오는 방법입니다. 컴포넌트 내부 가드인 beforeRouteEnter 가드에서 데이터를 가져옵니다. 데이터 가져오기가 완료 된 후에는 next 함수를 호출해야 합니다.

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // when route changes and this component is already rendered,
  // the logic will be slightly different.
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

데이터 가져오기가 완료 되어 next 함수가 호출되기 전 까지는 이전 view가 유지 됩니다. 그렇기 때문에 데이터를 가져오는 동안에 프로그래스 바나 인디케이터 등, 로딩 상태를 화면에 나타내는 것이 좋습니다. 데이터 가져오기가 실패한 경우에도 실패 메시지를 화면에 출력하는 것이 좋습니다.

참고

• https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-before-navigation