[javascript] Axios와 함께 사용할 수 있는 페이징 처리 방법

21 Nov 2023

javascript

자바스크립트에서 HTTP 요청을 보내는 라이브러리인 Axios는 페이징 처리를 할 때 매우 효과적으로 사용될 수 있습니다. 페이징 처리는 서버에서 데이터를 조각조각 받아오는 기능을 의미합니다. 이번 블로그에서는 Axios를 사용하여 페이징 처리를 하는 방법을 알아보겠습니다.

1. Axios 라이브러리 설치

Axios를 사용하기 위해서는 먼저 라이브러리를 설치해야 합니다. npm을 사용한다면 다음과 같이 명령어를 실행하세요:

npm install axios

2. Axios를 활용한 페이징 처리

Axios는 HTTP 요청을 보내는 기능뿐만 아니라, Promise 기반의 API를 제공하여 비동기 처리를 간편하게 할 수 있습니다. 다음은 Axios를 사용하여 GET 요청을 보내고, 페이징 처리된 데이터를 받아오는 예제입니다.

import axios from 'axios';

const fetchData = async (page) => {
  const response = await axios.get(`https://api.example.com/data?page=${page}`);
  const data = response.data;
  // 받아온 데이터를 처리하는 코드 작성
};

const fetchAllData = async () => {
  let page = 1;
  let hasMoreData = true;

  while (hasMoreData) {
    await fetchData(page);
    page++;

    // 페이징 처리된 데이터의 마지막 페이지인지 확인
    if (/* 마지막 페이지 */) {
      hasMoreData = false;
    }
  }
};

fetchAllData();

위의 예제에서는 fetchData 함수를 통해 각 페이지의 데이터를 비동기로 받아오고, fetchAllData 함수를 통해 모든 데이터를 가져옵니다. while 루프를 사용하여 페이징 처리된 데이터의 마지막 페이지인지 확인하고, hasMoreData 변수를 통해 반복을 제어합니다.

3. 페이징 처리된 데이터 사용 예시

Axios를 활용하여 페이징 처리된 데이터를 받아온 뒤에는 이를 실제로 사용하는 코드를 작성해야 합니다. 데이터를 받아온 후에는 원하는 방식으로 데이터를 활용하면 됩니다. 아래는 받아온 데이터를 화면에 표시하는 예시 코드입니다.

import axios from 'axios';

const fetchData = async (page) => {
  const response = await axios.get(`https://api.example.com/data?page=${page}`);
  const data = response.data;

  // 데이터를 활용하여 UI에 표시하는 코드 작성
  data.forEach((item) => {
    const element = document.createElement('div');
    element.innerHTML = item.text;
    document.body.appendChild(element);
  });
};

const fetchAllData = async () => {
  let page = 1;
  let hasMoreData = true;

  while (hasMoreData) {
    await fetchData(page);
    page++;

    // 페이징 처리된 데이터의 마지막 페이지인지 확인
    if (/* 마지막 페이지 */) {
      hasMoreData = false;
    }
  }
};

fetchAllData();

위의 예제에서는 fetchData 함수에서 받아온 데이터를 forEach 메소드를 사용하여 돌면서 UI에 표시하는 코드를 작성했습니다. 이를 통해 페이징 처리된 데이터를 화면에 표시할 수 있습니다.

마무리

Axios를 사용하여 페이징 처리를 하는 방법에 대해 알아보았습니다. Axios의 간편한 API와 비동기 처리 기능을 활용하여 효율적으로 페이징 처리된 데이터를 받아올 수 있습니다. 이를 활용하여 웹 애플리케이션에서 페이징 기능을 구현할 수 있습니다.

참고 자료: