[typescript] 타입스크립트와 Vue.js에서 무한 스크롤링 구현하기

15 Dec 2023

typescript

무한 스크롤링은 웹 애플리케이션에서 많은 양의 데이터를 효율적으로 로드하고 렌더링하는 방법으로, 사용자가 스크롤을 내릴 때 추가적인 데이터가 자동으로 로드되어 보여지는 형태를 말합니다. 이 글에서는 타입스크립트와 Vue.js를 사용하여 간단한 무한 스크롤링을 구현하는 방법에 대해 알아보겠습니다.

1. 기본 구조 설정

우선 타입스크립트와 Vue.js를 사용하여 간단한 프로젝트를 설정합니다. 아래는 package.json 파일의 일부분입니다.

{
  "name": "infinite-scroll-example",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@types/vue": "^2.0.3",
    "typescript": "^3.9.5",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

2. 무한 스크롤링 컴포넌트 작성

다음으로, Vue 컴포넌트에서 무한 스크롤링을 구현합니다. 아래는 적절한 데이터를 로드하고 화면에 표시하기 위한 간단한 예제 코드입니다.

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
    <div ref="scrollEnd"></div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class InfiniteScrollComponent extends Vue {
  items: { id: number, name: string }[] = [];

  mounted() {
    window.addEventListener('scroll', this.onScroll);
  }

  beforeDestroy() {
    window.removeEventListener('scroll', this.onScroll);
  }

  async loadMoreData() {
    // 추가 데이터를 가져오는 비동기 작업 수행
    const additionalItems = /* 데이터를 가져오는 비동기 작업 */;
    this.items.push(...additionalItems);
  }

  onScroll() {
    const scrollEnd = this.$refs.scrollEnd as HTMLElement;
    if (scrollEnd.getBoundingClientRect().top <= window.innerHeight) {
      this.loadMoreData();
    }
  }
}
</script>

위 코드는 InfiniteScrollComponent라는 Vue 컴포넌트를 생성하여 무한 스크롤링을 구현한 것입니다. loadMoreData 메서드는 스크롤이 최하단에 도달했을 때 새로운 데이터를 가져오는 비동기 작업을 수행하고, onScroll 메서드는 스크롤 이벤트를 처리합니다.

3. 애플리케이션에 컴포넌트 추가

마지막으로, 애플리케이션의 루트 컴포넌트에서 InfiniteScrollComponent를 추가합니다.

<template>
  <div id="app">
    <infinite-scroll-component></infinite-scroll-component>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import InfiniteScrollComponent from './InfiniteScrollComponent.vue';

@Component({
  components: {
    InfiniteScrollComponent,
  },
})
export default class App extends Vue {
  // 애플리케이션 루트 컴포넌트
}
</script>

마무리

위 방법을 사용하여 타입스크립트와 Vue.js에서 간단한 무한 스크롤링을 구현할 수 있습니다. 이를 활용하여 대용량 데이터를 효과적으로 다루고 사용자 경험을 향상시킬 수 있습니다.