vue-query 맛보기

 

언젠가 써봐야지..

---

1. vue-query를 사용하지 않은 기존 방식

기존 방식으로 데이터를 페칭할 때는 fetch, 상태 변수 관리, 에러 핸들링 등을 직접 작성

import { ref, onMounted } from '@vue/composition-api';

export default {
  setup() {
    // 상태 변수 정의
    const data = ref(null);
    const isLoading = ref(true);
    const isError = ref(false);

    // 데이터 패칭 함수
    const fetchUsers = async () => {
      isLoading.value = true;
      isError.value = false;

      try {
        const response = await fetch('https://api.example.com/users');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        data.value = await response.json(); // 데이터 저장
      } catch (error) {
        isError.value = true; // 에러 상태 설정
      } finally {
        isLoading.value = false; // 로딩 완료
      }
    };

    // 컴포넌트가 마운트될 때 데이터 페칭
    onMounted(fetchUsers);

    return {
      data,
      isLoading,
      isError
    };
  }
};

 

• 상태 관리 변수 (data, isLoading, isError)를 수동으로 정의하고 초기화해야 함
• 데이터 패칭 함수 (fetchUsers) 내부에서 로딩 상태를 설정하고, 에러가 발생했을 때의 처리를 직접 구현해야 함
• 컴포넌트가 마운트될 때 데이터를 페칭하기 위해 onMounted 훅에서 fetchUsers()를 호출
• 이러한 방식은 데이터를 패칭하는 로직이 길고, 상태를 수동으로 관리해야 하기 때문에 코드가 복잡하고 반복적

 

---

2. vue-query를 사용한 방식

Vue Query는 데이터를 패칭하고 상태를 관리하는 부분을 더 간편하게 처리할 수 있음. 이 방식은 React Query와 유사하게 동작하며, 데이터 패칭 로직과 상태 관리가 매우 간결

 

import { useQuery } from 'vue-query';

export default {
  setup() {
    // 데이터 패칭 함수
    const fetchUsers = async () => {
      const response = await fetch('https://api.example.com/users');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    };

    // useQuery 사용하여 데이터 패칭 및 상태 관리
    const { data, isLoading, isError } = useQuery('users', fetchUsers);

    return {
      data,
      isLoading,
      isError
    };
  }
};

 

• useQuery('users', fetchUsers): useQuery를 사용하여 데이터를 패칭하며, 데이터의 키 (users)와 데이터 패칭 함수 (fetchUsers)를 전달합니다.
• 로딩 상태 (isLoading), 에러 상태 (isError) 등이 useQuery에서 자동으로 관리됩니다.
• 데이터를 패칭할 때마다 자동으로 로딩 상태가 업데이트되고, 에러가 발생하면 자동으로 에러 상태가 업데이트됩니다.
• 결과적으로, 복잡한 상태 관리와 에러 핸들링 코드가 줄어들고, 코드가 간결하고 읽기 쉬워집니다.

 

---

비교 및 주요 차이점

1. 코드의 간결성:
   • 기존 방식에서는 데이터 패칭 함수 외에도 상태 관리 변수, 로딩/에러 상태 설정을 직접 관리해야 함
   • Vue Query를 사용하면 useQuery를 통해 자동으로 상태가 관리되므로 코드 양이 줄어들고, 가독성이 높아짐
2. 상태 관리의 편리성:
   • 로딩 상태 (isLoading)와 에러 상태 (isError)는 Vue Query에서 자동으로 제공되므로, 이를 직접 관리할 필요가 없음
   • 데이터 패칭 중에 로딩 상태가 자동으로 설정되고, 패칭이 완료되면 자동으로 로딩 상태가 해제.
3. 자동 캐싱 및 데이터 동기화:
   • Vue Query는 데이터 캐싱을 지원하므로, 같은 키를 사용하는 데이터에 대해서는 캐싱된 데이터가 자동으로 사용되어 불필요한 네트워크 요청을 줄여줌
   • 데이터의 자동 리패칭 기능도 있어, 데이터가 변경되었을 때 자동으로 서버와 동기화할 수 있음
4. React Query와 유사한 API:
   • Vue Query의 API는 React Query와 매우 유사하여, React Query에 익숙한 개발자라면 쉽게 적응 ㄱㄴ
   • useQuery는 React Query의 useQuery와 거의 동일하게 사용되며, 이는 개발 경험을 통일시키고, 비동기 데이터 페칭에 대한 일관된 방식을 제공