Vue에서 무한 스크롤을 구현하는 방법

무한 스크롤은 애플리케이션에 대규모 데이터 세트를 표시해야 할 때 유용합니다. Vue에서 구현하는 방법을 알아보세요.

무한 스크롤은 앱 사용자가 페이지를 아래로 스크롤할 때 더 많은 콘텐츠를 표시하는 데 사용할 수 있는 기술입니다. 페이지 매김이 필요하지 않으며 앱 사용자가 대규모 데이터 세트를 계속 스크롤할 수 있습니다.

Vue 애플리케이션 설정

이 튜토리얼을 진행하려면 Vue 3 및 JavaScript에 대한 기본적인 이해가 필요합니다. Axios로 HTTP 요청을 처리하는 방법을 알아야 합니다.

무한 스크롤 구현 방법을 알아보려면 원하는 디렉터리에서 다음 npm 명령을 실행하여 새 Vue 앱을 만드세요.

npm create vue

프로젝트 설정 중에 Vue는 앱의 사전 설정을 선택하라는 메시지를 표시합니다. 앱에 추가할 사항이 없으므로 모든 기능에 대해 아니요를 선택하세요.

새 앱을 만든 후에는 앱 디렉터리로 이동하여 다음 npm 명령을 실행하여 필요한 패키지를 설치합니다.

npm install axios @iconify/vue @vueuse/core

npm 명령은 axios(HTTP 요청용), @iconify/vue(Vue에 아이콘을 쉽게 통합하기 위해), < Strong>@vueuse/core (필수 Vue 유틸리티 제공).

axios 및 @iconify/vue를 사용하여 데이터를 가져오고 애플리케이션에 아이콘을 추가합니다. @vueuse/core에는 무한 스크롤을 달성하기 위한 useInfiniteScroll 구성요소를 포함한 Vue 유틸리티가 포함되어 있습니다.

JSONPlaceholder API에서 더미 데이터 가져오기

무한 스크롤 기능을 구현하려면 데이터가 필요합니다. 이러한 데이터를 하드 코딩하거나 JSONPlaceholder와 같은 무료 가짜 API 소스에서 데이터를 가져올 수 있습니다.

대부분의 웹 애플리케이션은 하드 코딩된 데이터 대신 데이터베이스에서 데이터를 가져오기 때문에 JSONPlaceholder에서 이러한 데이터를 가져오는 것은 실제 시나리오를 모방합니다.

Vue 애플리케이션용 API에서 데이터를 가져오려면 src 디렉터리에 새 폴더를 만들고 이름을 api로 지정하세요. 해당 폴더에 새 JavaScript 파일을 만들고 다음 코드를 붙여넣습니다.

//getComments.js
import axios from "axios";
async function getComments(max, omit) {
  try {
    const comments = await axios.get(
      `https://jsonplaceholder.typicode.com/comments?_limit=${max}&_start=${omit}`
    );
    return comments.data.map((comment) => comment.body);
  } catch (error) {
    console.error(error);
  }
}
export default getComments;

코드 조각은 API 엔드포인트 "https://jsonplaceholder.typicode.com/comments"에서 주석을 가져오기 위한 비동기 함수로 구성됩니다. 그런 다음 함수를 내보냅니다.

더 자세히 설명하기 위해 코드 조각은 axios 라이브러리를 가져오는 것으로 시작됩니다. 그런 다음 코드는 max 및 omit라는 두 가지 인수를 사용하여 getComments 함수를 정의합니다.

getComments 함수에는 URL에 대한 GET 요청을 보내는 axios.get() 메소드가 포함되어 있습니다. URL에는 템플릿 리터럴(``)을 사용하여 문자열 내에 삽입되는 쿼리 매개변수 max 및 omit가 포함되어 있습니다. 이를 통해 동적 값을 URL에 전달할 수 있습니다.

그런 다음 이 함수는 map 함수를 사용하여 API 엔드포인트에서 받은 주석의 본문으로 구성된 새 배열을 반환합니다.

오류가 발생하면 코드 조각이 이를 콘솔에 기록합니다. 그런 다음 코드 조각은 이 함수를 애플리케이션의 다른 부분으로 내보냅니다.

무한 스크롤 구성 요소 만들기

이제 더미 데이터를 가져오는 논리를 처리했으므로 더미 데이터를 표시하고 무한 스크롤 기능을 처리하는 새 구성 요소를 만들 수 있습니다.

src/comComponents 디렉터리에 새 파일 InfiniteScroll.vue를 만들고 다음 코드를 추가합니다.

<!-- InfiniteScroll.vue -->
<script setup>
import { ref } from "vue";
import getComments from "../api/getComments";
import { useInfiniteScroll } from "@vueuse/core";
const listEl = ref(null);
const commentsDisplayed = 20;
const commentsList = ref(await getComments(commentsDisplayed, 0));
const commentsToDisplayOnScroll = async () => {
  const newComments = await getComments(
    commentsDisplayed,
    commentsList.value.length
  );
  commentsList.value.push(...newComments);
};
useInfiniteScroll(
  listEl,
  async () => {
    await commentsToDisplayOnScroll();
  },
  { distance: 10 }
);
</script>

위의 코드 스니펫은 InfiniteScroll 구성요소의 스크립트 블록을 설명합니다.

코드 조각은 각각 vue 및 @vueuse/core에서 ref 및 useInfiniteScroll 함수를 가져옵니다. 또한 스니펫은 getComments.js 파일에서 getComments 함수를 가져옵니다.

그런 다음 스니펫은 ref 함수를 사용하여 listEl 참조를 생성합니다. listEl은 무한 스크롤 기능이 있는 DOM 요소를 참조합니다.

commentsDisplayed 변수는 페이지에 처음 표시되는 댓글 수를 나타냅니다. commentsList는 코드 조각이 getComments 함수를 사용하여 가져오는 주석 배열을 보유합니다.

이 스니펫은 getComments 함수를 사용하여 새 댓글을 가져오고 스프레드 연산자(< 강함>...).

마지막으로 코드 조각은 useInfiniteScroll 함수를 호출하여 세 가지 인수를 사용하여 무한 스크롤 동작을 활성화합니다.

DOM 요소(listEl) 참조는 앱 사용자가 스크롤할 목록을 나타냅니다.
사용자가 스크롤하여 새 댓글을 가져와 commentsList에 추가하는 비동기 함수 호출입니다.
속성이 포함된 선택적 구성 개체입니다. { distance: 10 } 객체는 사용자가 목록 하단에서 10픽셀 떨어져 있을 때 새 주석 로드를 시작해야 함을 지정합니다.

무한 스크롤 구성요소 사용

InfiniteScroll 구성 요소의 스크립트 블록에서 무한 스크롤 논리를 처리한 후 템플릿 블록에서 콘텐츠를 렌더링해야 합니다.

InfiniteScroll 구성요소에 다음 코드 블록을 붙여넣습니다.

<!-- InfiniteScroll.vue -->
<template>
  <div>
    <ul ref="listEl">
      <li v-for="comment in commentsList">
        {{ comment }}
      </li>
    </ul>
  </div>
</template>

이 코드 블록은 주석 목록 렌더링을 담당하는 Vue 구성 요소의 템플릿을 정의합니다.

commentsList

배열의 각 주석은 데이터 보간({{ comment }})을 사용하여

요소 내에 표시됩니다. 코드 블록은

Vue에서 무한 스크롤을 구현하는 방법

Vue 애플리케이션 설정

JSONPlaceholder API에서 더미 데이터 가져오기

무한 스크롤 구성 요소 만들기

무한 스크롤 구성요소 사용

슬롯이 있는 Vue 구성 요소를 재사용하는 방법 알아보기

관련기사: