데이터 로더

데이터 로더는 데이터 가져오기 와 같은 Vue Router의 비동기 상태 관리를 간소화합니다. Data Loaders를 도입하면 애플리케이션에서 데이터 가져오기를 일관되고 효율적으로 관리할 수 있습니다. Pinia Colada 같은 라이브러리의 장점은 그대로 유지하면서 클라이언트 사이드 내비게이션과 매끄럽게 통합할 수 있습니다.

이는 로딩 로직을 컴포넌트 setup 외부로 분리함으로써 달성됩니다( <Suspense>와는 다름). 이렇게 하면 로딩 로직을 컴포넌트 생명 주기와 독립적으로 실행할 수 있고, 컴포넌트는 데이터 렌더링에 집중할 수 있습니다. Data Loaders는 내비게이션 가드 안에서 자동으로 수집되고 await되므로, 컴포넌트를 렌더링하기 전에 데이터가 준비되도록 보장합니다.

기능

병렬 데이터 가져오기 및 중복 제거
자동 로딩 상태 관리
오류 처리
로더 구현으로 확장 가능
SSR 지원
데이터 프리페치 지원

설치

DataLoaderPlugin은 router보다 먼저 설치하세요.

// @errors: 2769 2345
import { createApp } from 'vue'
import { routes } from 'vue-router/auto-routes'
import { createRouter, createWebHistory } from 'vue-router'
import { DataLoaderPlugin } from 'vue-router/experimental'

const router = createRouter({
  history: createWebHistory(),
  routes,
})

const app = createApp({})
// router보다 먼저 플러그인을 등록합니다
app.use(DataLoaderPlugin, { router }) 
// router를 추가하면 초기 내비게이션이 트리거됩니다
app.use(router)
app.mount('#app')

빠른 시작

데이터 로더에는 여러 구현이 있습니다. 가장 단순한 것은 데이터 가져오기를 항상 다시 실행하는 Basic Loader입니다. 더 효율적인 구현으로는 내부적으로 @pinia/colada를 사용하는 Colada Loader가 있습니다. 아래 예제에서는 basic loader 를 사용합니다.

로더는 defineBasicLoader 또는 defineColadaLoader 같은 defineLoader 함수를 통해 정의하는 composable입니다. 필요한 정보를 꺼내기 위해 컴포넌트 setup에서 사용 합니다.

시작하려면 페이지 컴포넌트에서 로더를 정의 하고 export 하세요:

src/pages/users/[id].vue

vue

<script lang="ts">
import 'vue-router/auto-routes'
// @errors: 2339
// ---cut---
import { defineBasicLoader } from 'vue-router/experimental'
import { getUserById } from '../api'

export const useUserData = defineBasicLoader('/users/[id]', async (route) => {
  return getUserById(route.params.id)
})
</script>

<script setup lang="ts">
const {
  data: user, // 로더가 반환한 데이터
  isLoading, // 로더가 데이터를 가져오는 중인지 나타내는 불리언 값
  error, // 로더가 실패했을 때의 오류 객체
  reload, // 내비게이션 없이 데이터를 다시 가져오는 함수
} = useUserData()
</script>

<template>
  <main>
    <p v-if="isLoading">Loading...</p>
    <template v-else-if="error">
      <p>{{ error.message }}</p>
      <button @click="reload()">Retry</button>
    </template>
    <template v-else>
      <p>{{ user }}</p>
    </template>
  </main>
</template>

라우트가 변경되면 로더는 자동으로 실행됩니다. 예를 들어 /users/2에서 /users/1로 이동할 때도 로더가 데이터를 가져오고, 데이터가 준비될 때까지 내비게이션을 지연합니다.

또한 반환된 composable useUserData를 다른 어떤 컴포넌트에서든 재사용 할 수 있으며, 같은 데이터 가져오기 인스턴스를 자동으로 공유합니다. 페이지 컴포넌트에서 로더를 export 하기만 하면 로더를 별도 파일로 구성할 수도 있습니다.

왜 Data Loaders인가요?

데이터 가져오기는 웹 애플리케이션에서 가장 흔한 요구 사항입니다. 데이터를 가져오는 방법은 다양하고, 각각 장단점이 있습니다. 데이터 로더는 애플리케이션의 데이터 가져오기를 간소화하는 방법입니다. 특정 라이브러리 중 하나를 강제로 선택하게 하는 대신, 데이터 로더는 사용하는 기반 라이브러리나 전략이 무엇이든 애플리케이션에서 데이터를 일관되게 관리할 수 있는 방식을 제공합니다.

데이터 로더 ​

기능 ​

설치 ​

빠른 시작 ​

왜 Data Loaders인가요? ​

데이터 로더

기능

설치

빠른 시작

왜 Data Loaders인가요?