자바스크립트 fetch API를 사용한 페이징 처리

10 Sep 2023

javascript

지금까지 많은 웹 애플리케이션들은 페이징 처리를 위해 서버측에 Ajax 요청을 보내고 응답을 받아오는 방식을 사용해왔습니다. 하지만 최근에는 자바스크립트의 fetch API를 사용하여 클라이언트 측에서 간편하게 페이징 처리를 할 수 있습니다. 이 글에서는 자바스크립트 fetch API를 이용한 페이징 처리 방법을 알아보겠습니다.

fetch API란?

fetch API는 일반적으로 HTTP 요청을 만들고 응답을 가져오는 기능을 제공하는 자바스크립트의 내장 API입니다. 이전에는 주로 XMLHttpRequest 객체를 사용하여 Ajax 요청을 처리했지만, fetch API는 더 간결하고 유연하며 프로미스 기반으로 작성할 수 있습니다.

먼저, fetch 함수를 사용하여 서버로부터 데이터를 가져옵니다.

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    // 가져온 데이터를 처리하는 로직
  })
  .catch(error => {
    // 오류 처리 로직
  });

fetch 함수는 첫 번째 인자로 요청 URL을 받고, Promise를 반환합니다. 그 다음에는 응답 객체를 json 함수로 변환하여 실제 데이터를 가져와 처리하는 로직을 작성합니다.

페이징 처리를 위한 fetch API 사용

만약 서버에 페이징 처리된 데이터가 있다고 가정해봅시다. 서버로부터 한 페이지에 표시할 데이터의 수와 현재 페이지 번호를 전달받는 방식으로 페이징 처리를 할 것입니다.

function fetchData(page, perPage) {
  const url = `/api/data?page=${page}&perPage=${perPage}`;

  return fetch(url)
    .then(response => response.json())
    .catch(error => {
      // 오류 처리 로직
    });
}

fetchData 함수는 현재 페이지 번호와 한 페이지에 표시할 데이터의 수를 인자로 받아 URL을 생성하여 fetch 함수를 호출합니다. 그리고 응답을 JSON으로 변환하여 반환합니다.

이제 데이터를 가져오는 함수를 만들었으니, 실제로 페이징 처리를 위한 로직을 작성해봅시다.

let currentPage = 1;
const dataPerPage = 10;

function displayData(data) {
  // 데이터를 화면에 표시하는 로직
}

function loadNextPage() {
  currentPage++;

  fetchData(currentPage, dataPerPage)
    .then(data => {
      displayData(data);
    })
    .catch(error => {
      // 오류 처리 로직
    });
}

function loadPreviousPage() {
  if (currentPage > 1) {
    currentPage--;

    fetchData(currentPage, dataPerPage)
      .then(data => {
        displayData(data);
      })
      .catch(error => {
        // 오류 처리 로직
      });
  }
}

// 초기 페이지 로드
fetchData(currentPage, dataPerPage)
  .then(data => {
    displayData(data);
  })
  .catch(error => {
    // 오류 처리 로직
  });

위 코드에서는 초기 페이지 로드 시 fetchData 함수를 호출하여 첫 번째 페이지의 데이터를 가져옵니다. 그리고 이후에 사용자가 다음 페이지나 이전 페이지를 요청할 때 마다 fetchData 함수를 호출하여 해당 페이지의 데이터를 가져오고 화면에 표시합니다.

이렇게 자바스크립트 fetch API를 사용하여 페이징 처리를 할 수 있습니다. fetch API는 간편하게 사용할 수 있으며, 비동기 처리를 위해 프로미스를 사용하기 때문에 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.