Vue_3 (Vue Query)

기본 방식과 Vue Query 사용의 차이점

그냥 쓴 것과 Vue Query를 사용한 것의 주요 차이는 캐싱과 리페칭임

기본 방식 (그냥 쓴 것):

• 서버에서 데이터를 가져오면: 컴포넌트가 만들어질 때 서버에서 데이터를 직접 가져옴
• 데이터 캐싱이 없음: 데이터가 컴포넌트에 로드될 때마다 서버에 다시 요청해야 하며, 캐싱을 위한 별도의 처리 없이 API가 매번 호출됨
• 리페칭 없음: 데이터 변경이나 네트워크 상태 변화를 자동으로 반영하지 않습니다. 수동으로 다시 데이터를 가져오는 로직을 추가해야 함

<template>
  <div class="home">
    <MemoList :memos="memos" />
  </div>
</template>

<script>
import MemoList from "@/components/MemoList.vue";
import memosApi from "@/api/memos";

export default {
  name: "MemoHome",
  components: {
    MemoList,
  },
  data() {
    return {
      memos: [], // 데이터 저장할 빈 배열
    };
  },
  created() {
    this.fetchAllMemos();
  },
  methods: {
    fetchAllMemos() {
      memosApi
        .GetAllMemos()
        .then((response) => {
          this.memos = response.data.dtoList;
        })
        .catch((error) => {
          console.error("Error fetching memos", error);
        });
    },
  },
};
</script>

 

Vue Query를 사용한 방식:

• 자동 캐싱: 데이터를 한 번 가져오면 캐시에 저장되며, 동일한 데이터를 여러 번 요청할 필요가 없음
• 자동 리페칭: 데이터가 변경되거나, 브라우저 포커스가 다시 맞춰지거나, 네트워크가 재연결되면 자동으로 리페칭이 이루어져 최신 상태를 유지함
• 상태 관리 간소화: isLoading, error, data 같은 상태를 Vue Query가 자동으로 관리해주기 때문에, 개발자가 상태 관리에 신경 쓸 필요가 없음.
• 재시도 로직: 실패한 요청에 대해서는 자동으로 재시도할 수 있는 기능이 있음

<template>
  <div class="home">
    <MemoList :memos="memos" />
  </div>
</template>

<script>
import MemoList from "@/components/MemoList.vue";
import { useQuery } from 'vue-query';
import memosApi from "@/api/memos";

export default {
  name: "MemoHome",
  components: {
    MemoList,
  },
  setup() {
    // useQuery를 사용하여 서버에서 메모 데이터를 패칭하고, 캐싱된 상태 관리
    const { data: memos, error, isLoading } = useQuery('memos', memosApi.GetAllMemos);

    // 데이터를 패칭 중일 때 로딩 상태를 나타냄
    if (isLoading) {
      return { memos: [], loading: true };
    }

    // 에러가 발생했을 때 콘솔에 로그 출력
    if (error) {
      console.error("Error fetching memos", error);
    }

    // 데이터가 패칭되면 메모 데이터를 반환
    return {
      memos: memos?.value?.dtoList || [],
    };
  },
};
</script>

 

언제 Vue Query를 사용하고, 언제 그냥 쓰는 것이 좋은가?

그냥 쓰는 것이 적합한 상황:

• 단순한 데이터: 가볍고 변경이 자주 일어나지 않는 데이터(예: 간단한 메모 데이터).
• 캐싱이 필요 없는 경우: 데이터가 자주 변경되지 않거나, 매번 새롭게 데이터를 불러오는 것이 중요할 때.
• 복잡한 상태 관리가 필요 없을 때: 데이터가 많지 않고, 비동기 상태 관리를 복잡하게 다룰 필요가 없는 경우.

Vue Query를 사용하는 것이 적합한 상황:

• 복잡한 데이터 상태 관리: 서버 상태(예: 여러 페이지에서 공유되는 데이터)를 효율적으로 관리할 때.
• 캐싱이 필요한 경우: 데이터를 여러 번 요청할 때 성능 최적화를 위해 캐싱을 활용하고 싶은 경우.
• 자동 리페칭: 데이터가 자주 변경되거나, 실시간으로 데이터를 동기화해야 할 때 (예: 채팅 앱, 실시간 대시보드 등).
• 상태 및 오류 관리 간소화: 로딩, 에러 처리 같은 상태 관리 로직을 간편하게 처리하고 싶은 경우.

요약:

• 기본 방식: 메모 같은 가볍고 단순한 데이터의 경우 적합. 상태 관리 및 캐싱이 필요 없고, 매번 새 데이터를 가져와도 되는 경우.
• Vue Query 사용: 캐싱과 자동 리페칭이 필요한 상황에서 적합. 데이터 변경이 잦고, 성능 최적화와 효율적인 서버 상태 관리가 필요한 경우.
•  

요구사항과 데이터의 복잡성에 따라 두 방식 중 하나를 선택하는 것이 적절

메모 같은 단순한 컴포넌트에는 기본 방식을 사용하고, 실시간 데이터나 복잡한 데이터 상태 관리가 필요한 경우 Vue Query를 사용하는 것이 좋음