[Vue.JS] 컴포넌트 (고급:Dynamic & Async Components)

1. 동적(Dynamic) 컴포넌트와 keep-alive

[Vue.JS] 컴포넌트 (기본) 에서 동적 컴포넌트에 관한 이야기를 하였습니다.

<component v-bind:is="currentTabComponent"></component>

위의 코드와 같이 is를 사용하여 동적으로 컴포넌트를 랜더링 할 수 있습니다,

탭 이동시 새로운 컴포넌트가 그려지기 때문에 이전의 tab의 상태를 기억하지 못합니다,

is를 사용한 동적 컴포넌트 랜더링을 사용하여 위의 그림와 같이 탭 뷰를 만들 수 있습니다. 하지만 탭을 이동 할 때마다, 새로운 컴포넌트가 그려지기 때문에, 이전의 tab의 상태를 기억하지 못합니다. 위의 예제에서는 Posts 탭에서 Hipster Ipsum을 클릭 했지만, Archive 탭으로 변경하고 다시 Posts 탭으로 돌아오면 이전에 클릭했던 Hipster Ipsum이 보이는 상태가 아니게 됩니다.

탭을 변경 할 때, 이전 탭의 상태를 유지하는 것이 성능 상 좋을 수 있습니다.

<!-- Inactive components will be cached! -->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

위의 코드와 같이 <keep-alive>를 사용하면 인스턴스를 캐시로 저장 할 수 있습니다.

<keep-alive>를 사용하면 생성된 탭의 인스턴스를 캐시에 저장 하고 있기 때문에, 탭을 변경 후 돌아 왔을 때 탭을 새로 그리지 않고 이전 탭을 보이게 됩니다.

keep-alive는 이전 상태를 기억합니다,

위의 그림과 같이 Posts 탭에서 Hipster Ipsum을 클릭한 후 Archive 탭을 클릭하고 Posts 탭으로 돌아온 경우 Posts 탭을 캐시에 저장하고 있기 때문에 다시 돌아왔을 때, 이전에 클릭한 Hipster Ipsum이 보이게 됩니다.

위의 예제는 Fiddle에서 확인 할 수 있습니다.

2. 비동기(Async) 컴포넌트

어플리케이션이 커지면, 작은 부분으로 나누고 필요할 때에 가져와 사용하는 구조를 구현해야 할 때가 있습니다. 비동기 컴포넌트를 사용하여 필요할 때 비동기적으로 컴포넌트를 불러와 사용할 수 있습니다.

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // Pass the component definition to the resolve callback
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

위의 코드와 같이 팩토리 함수를 사용하여 비동기 컴포넌트를 구현 할 수 있습니다. 컴포넌트를 가져오는 것이 성공하면 resolve 콜백을 실행 해야 하고, 실패할 경우 reject 콜백을 실행해야 합니다. resolve와 reject의 인자는 컴포넌트를 생성 할 때의 옵션 값과 동일 합니다.

Vue.component('async-webpack-example', function (resolve) {
  // This special require syntax will instruct Webpack to
  // automatically split your built code into bundles which
  // are loaded over Ajax requests.
  require(['./my-async-component'], resolve)
})

위의 코드와 같이 Webpack을 사용하여 다른 파일로 구분된 컴포넌트를 비동기 컴포넌트로 만들 수 있습니다.

Vue.component(
  'async-webpack-example',
  // The `import` function returns a Promise.
  () => import('./my-async-component')
)

위의 코드와 같이 Webpack 2와 ES2015 문법을 사용하여 비동기 컴포넌트를 만들 수도 있습니다.

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

지역적으로 컴포넌트를 등록할때는 위의 코드와 같이 사용해야 합니다.

1) Handling Loading State

2.3.0 이상의 Vue 버전에서 사용할 수 있는 기능입니다. 비동기 컴포넌트를 좀 더 간결하고, 직관적으로 사용할 수 있게 되었습니다.

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

2.3.0 이상 부터 지원하는 간결한 비동기 컴포넌트 구현 방법

참고

• https://vuejs.org/v2/guide/components-dynamic-async.html