Axios를 사용하여 클라이언트 측에서 무한 스크롤 구현하기

10 Nov 2023

axios

무한 스크롤은 웹 애플리케이션에서 많은 양의 데이터를 효율적으로 로딩하기 위해 사용되는 기술입니다. 사용자가 페이지를 스크롤하면 자동으로 새로운 데이터가 로딩되는 방식으로 동작합니다. 이번 블로그 포스트에서는 Axios 라이브러리를 사용하여 클라이언트 측에서 간단하게 무한 스크롤을 구현하는 방법을 알아보겠습니다.

요구사항

Axios: 클라이언트 측 HTTP 통신을 위한 라이브러리

무한 스크롤 구현하기

초기 데이터 로딩

페이지가 처음 로딩될 때 초기 데이터를 불러옵니다.
Axios를 사용하여 서버로부터 초기 데이터를 요청합니다.

Example code:

import axios from 'axios';

const fetchData = async () => {
  const response = await axios.get('/api/data');
  const data = response.data;

  // 초기 데이터 처리 로직
};

fetchData();

스크롤 이벤트 리스너 등록

스크롤 이벤트를 감지하여 스크롤 위치를 파악합니다.
스크롤 위치가 특정 기준치에 도달하면 추가 데이터를 로딩합니다.

Example code:

const handleScroll = () => {
  const { scrollTop, clientHeight, scrollHeight } = document.documentElement;

  if (scrollTop + clientHeight >= scrollHeight - 10) {
    // 추가 데이터 로딩
  }
};

window.addEventListener('scroll', handleScroll);

추가 데이터 로딩

스크롤 위치가 특정 기준치에 도달하면 Axios를 사용하여 서버로부터 추가 데이터를 요청합니다.
받아온 데이터를 기존 데이터에 추가하고 화면에 렌더링합니다.

Example code:

let page = 1;

const loadMoreData = async () => {
  const response = await axios.get(`/api/data?page=${page}`);
  const newData = response.data;

  // 받아온 데이터 추가 처리 로직

  page++; // 다음 페이지로 이동
};

// 스크롤 이벤트 발생 시 추가 데이터 로딩
const handleScroll = () => {
  const { scrollTop, clientHeight, scrollHeight } = document.documentElement;

  if (scrollTop + clientHeight >= scrollHeight - 10) {
    loadMoreData();
  }
};

window.addEventListener('scroll', handleScroll);

마무리

이번 포스트에서는 Axios를 사용하여 클라이언트 측에서 무한 스크롤을 구현하는 방법을 알아보았습니다. Axios를 활용하면 간편하게 서버로부터 데이터를 불러오고 추가 데이터를 요청할 수 있습니다. 무한 스크롤을 구현하여 사용자 친화적인 웹 애플리케이션을 만들어보세요!

해시태그: #Axios #무한스크롤