Now Loading ...
-
-
Vue에서 API 연결하기 (1)
Vue에서 API 연결하기 (1)
axios 대신 vueuse의 useAxios를 사용한다면?
useAxios는 Vue의 유틸리티 라이브러리인 VueUse에서 제공하는 훅으로, Axios와 결합하여 더 편리한 API 호출 관리를 돕는다.
useAxios의 장﹒단점
장점
반응형 데이터 관리
useAxios는 Vue의 반응형 시스템과 잘 통합되어, API 호출 결과를 반응형으로 관리할 수 있음.
→ Vue의 ref, reactive와 같은 기능과 결합해 상태 관리가 자연스럽게 이루어짐.
ex) API 응답 데이터를 화면에 실시간으로 반영하거나 로딩 상태 등을 쉽게 추적 가능.
편리한 상태 추적
useAxios는 로딩 상태, 에러 상태, 응답 데이터 등을 관리할 수 있는 상태값 제공.
API 호출의 현 상태 파악 용이 → UI에서 로딩 스피터 표시, 에러메시지 출력 등 구현 용이.
상태값을 컴포넌트 내에서 간편하게 사용 가능 → 코드 가독성 up.
자동 취소 기능
컴포넌트가 언마운트되거나 특정 조건에서 불필요한 API 호출을 자동으로 취소할 수 있는 기능 제공.
→ 불필요한 네트워크 요청 감소 & 자원 효율적 사용 가능.
타입스크립트 지원
useAxios는 타입스크립트와 효환성이 좋음.
→ 요청과 응답의 타입을 명확하게 정의할 수 있어, 타입 안정성 유지하며 개발 가능.
단점
추가 학습 곡선
useAxios를 사용하려면 VueUse 라이브러리와 그 API에 대한 학습 필요
의존성 추가
vue에 대한 프로젝트 의존성 증가 → 프로젝트의 빌드 크기 증가나 업데이트시 호환성 문제 유발 가능성 up.
제한된 커스터마이징
useAxios는 특정 패턴에 따라 동작 → 모든 요구사항에 충족하지 못할 수도 있음.
ex) 매우 세밀한 요청 커스터마이징이 필요한 경우, axios의 고급 기능을 사용하는 경우
useAxios 적절한 사용법
공식문서에는 useAxios 사용시 axios와 적절히 섞어가며 쓰는 걸 알 수 있다.
공식문서에 따르면 axios를 통해 인스턴스를 전역으로 먼저 생성하고 해당 인스턴스를 useAxios의 옵션으로 사용할 수 있다.
useAxios만 활용한다면 아래와 같이,
import { useAxios } from "@vueuse/integrations/useAxios";
const { data, isFinished } = useAxios("/api/posts");
axios를 통해 전역 인스턴스를 생성한 후, 해당 인스턴스를 useAxios의 옵션으로 활용하는 방법은 아래와 같이 쓸 수 있다.
import axios from "axios";
import { useAxios } from "@vueuse/integrations/useAxios";
const instance = axios.create({
baseURL: "/api",
});
const { data, isFinished } = useAxios("/posts", { method: "POST" }, instance);
현재 우리 프로젝트의 추후 확장성과 유연성을 생각하면 axios와 useAxios를 같이 사용하는 방향이 더 낫다고 판단됨.
+) Advanced:
[Advanced] vue에서 axios만 사용하는게 더 편리하지 않을까?
+) 실제 실습 내용:
[Vue] Vue에서 BE의 API 연결하기
Touch background to close
SY Tech & Dev Blog
