[javascript] Axios를 사용한 데이터 캐싱하기

21 Nov 2023

javascript

Axios는 자바스크립트에서 가장 인기 있는 HTTP 클라이언트 라이브러리 중 하나입니다. 비동기적으로 서버에 요청을 보내고 응답을 받을 수 있게 해주는데, 이러한 기능을 통해 데이터를 효율적으로 캐싱할 수 있습니다. 데이터 캐싱은 서버에 반복적으로 요청을 보내는 대신에 이전에 가져온 데이터를 사용하여 효율성을 높입니다.

이번 글에서는 Axios를 사용하여 데이터를 캐싱하는 방법을 알아보겠습니다.

Axios 인스턴스 생성하기

먼저, Axios 인스턴스를 만들어야 합니다. Axios 인스턴스를 사용하면 데이터 요청에 대한 설정을 미리 지정할 수 있습니다.

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000, // 요청 제한 시간 설정
});

export default axiosInstance;

위의 코드에서 axios.create 메소드를 사용하여 Axios 인스턴스를 생성합니다. baseURL은 요청을 보낼 서버의 기본 주소를 의미하며, timeout은 요청 제한 시간을 설정하는 옵션입니다.

데이터 요청과 캐싱

이제, 데이터 요청을 보내고 응답을 받는 함수를 작성해 보겠습니다. 응답을 받으면 이를 캐싱하여 다음에 동일한 요청이 있을 때 사용할 수 있습니다.

import axiosInstance from './axiosInstance';

let cache = {};

async function getData(url) {
  if (cache[url]) {
    return cache[url];
  } else {
    try {
      const response = await axiosInstance.get(url);
      cache[url] = response.data;
      return response.data;
    } catch (error) {
      throw new Error(error.message);
    }
  }
}

export default getData;

위의 코드에서 cache 객체는 데이터를 캐싱하기 위한 변수입니다. getData 함수에서는 먼저 cache 객체에 요청한 데이터가 이미 있는지 확인하고, 이미 데이터가 캐싱되어 있다면 캐시된 데이터를 반환합니다. 그렇지 않은 경우 Axios를 사용하여 서버에 요청을 보내고, 응답을 받으면 cache에 데이터를 저장하고 응답 데이터를 반환합니다. 오류가 발생한 경우에는 에러를 던지도록 처리합니다.

캐싱된 데이터 사용하기

이제 캐싱된 데이터를 사용하여 화면에 표시해 보겠습니다. 예를 들어, 캐싱된 유저 리스트를 불러오는 예제 코드를 작성해 보겠습니다.

import React, { useEffect, useState } from 'react';
import getData from './getData';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function fetchUserList() {
      try {
        const userList = await getData('/users');
        setUsers(userList);
      } catch (error) {
        console.error(error);
      }
    }

    fetchUserList();
  }, []);

  return (
    <div>
      {users.map(user => (
        <div key={user.id}>
          <p>{user.name}</p>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
}

export default UserList;

위의 코드에서 getData('/users') 함수를 사용하여 유저 리스트 데이터를 가져옵니다. 이전에 요청한 데이터가 존재한다면 해당 데이터를 사용하여 화면에 표시하게 됩니다.

Axios를 사용하여 데이터를 캐싱하는 방법을 알아보았습니다. 데이터를 캐싱함으로써 네트워크 요청의 빈도를 줄이고 앱의 성능을 향상시킬 수 있습니다. Axios를 사용하여 데이터를 캐싱하는 것은 간단하며, 많은 개발자들이 기존 Ajax 요청을 Axios로 변경해 나가는 이유 중 하나입니다.