Vue.js vue-infinite-loading을 사용한 무한 스크롤 구현하기

무한 스크롤

웹 어플리케이션에서 페이지 스크롤이 아래로 내려가면서 자동으로 추가 콘텐츠를 로드하는 무한 스크롤은 사용자 경험을 향상시킵니다. 바닐라 JS로 구현도 가능하지만 간단하게 구현하기 위해 Vue.js에서 제공하는 플러그인을 사용하여 구현해보겠습니다. vue-infinite-scroll과 vue-infinite-loading이 있지만 vue-infinite-loading vue 컴포넌트 라이브러리를 사용한 예시를 보여드리겠습니다. 

 

vue-infinite-loading

Vue.js 애플리케이션에 무한 스크롤 기능을 추가하는데 도움을주는 Vue 컴포넌트 라이브러리입니다. 이 라이브러리를 통해 무한 스크롤을 간단하게 구현할 수 있습니다. 다음 링크에 나와있는 예제 코드를 참고하여 작성했습니다.

https://jsfiddle.net/rLw27aby/2/ 

 

vue-infinite-loading 설치:

npm install vue-infinite-loading

 

코드 작성:

axios를 이용하여 GET 요청을 보내기 때문에 요청을 받는 서버 쪽에 page와 perPage를 파라미터로 받는 코드를 작성해주어야 합니다. (MySQL의 경우 limit/offset)

<template>
    <div>
        <h3 class="user-list-title">사용자 리스트</h3>
        <div class="table-container">
            <table class="user-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>이름</th>
                        <th>소속</th>
                        <th>전화번호</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users" :key="user.userId">
                        <td>{{ user.userId }}</td>
                        <td>{{ user.userName }}</td>
                        <td>{{ user.userOrganization }}</td>
                        <td>{{ user.cellphone }}</td>
                    </tr>
                </tbody>
            </table>
            <infinite-loading @infinite="infiniteHandler"></infinite-loading>
        </div>
    </div>
</template>
 
<script>
import Constants from '@/constants.js';
import InfiniteLoading from 'vue-infinite-loading';
 
export default {
    components: {
        InfiniteLoading,
    },
    data() {
        return {
            page: 1,
            users: [],
        }
    },
    methods: {
        infiniteHandler($state) {
            this.$axios.get(Constants.URL.GET_USERS, {
                params: {
                    page: this.page,
                    perPage: 10     // 가져올 개수
                },
            }). then((response) => {
                const data = response.data;
                if (data.length) {
                    this.page++;
                    this.users.push(...data);
                    $state.loaded();
                } else {
                    $state.complete();
                }
            });
        },
    },
}
</script>