[Vue] 무한 스크롤 구현하기

✨구현방식

무한스크롤을 구현하기 위해서 컴포넌트의 최대높이가 현재 스크롤위치와 비슷해질 때를 찾아서 데이터를 추가로 받는다.

🧨 참고: Vue에서 무한스크롤을 지원하는 라이브러리가 존재합니다! 아래는 Vue의 환경에서 JS를 사용해서 하는 구현하는 방법입니다.

---

✨구현과정

1. 컴포넌트가 생성될 때, 스크롤을 할 때 감시하고 있을 이벤트리스너를 추가합니다.

   📌 Vue의 Lifecycle Hook에 대한 이해가 필요합니다.
   created()에 이벤트리스너를 등록해두면, 컴포넌트가 생성될 때 이벤트리스너를 생성합니다.

export default {
  created() {
      window.addEventListener("scroll", this.handleScroll)
  }
}

2. 스크롤 할 때 발생하는 함수를 작성합니다.
   • this.$refs.scrollcheck.scrollHeight는 ref를 사용해서 직접 참조 할 컴포넌트를 지정해서 해당 컴포넌트의 최대높이를 참조할 수 있습니다.
   • (window.innerHeight + window.scrollY)는 각각
     (내가 보고있는 화면의 높이+화면 상단 스크롤 위치)에 해당하기 때문에
     두가지를 더하면 화면 하단 스크롤 위치가 됩니다.
   • 스크롤 중에 데이터를 추가하기 위해서 1000px의 여유공간을 두었습니다.

<template>
  <div ref="scrollcheck">
    ...
  </div>
</template>
export default {
  ...
  methods:{
    handleScroll() {
      if (this.$refs.scrollcheck.scrollHeight - (window.innerHeight + window.scrollY) < 1000){
          ...
      }
    }
  }
}

3. template부분과 함수 실행 시 영화를 추가하는 부분을 작성합니다. 직접 참조할 부분을 ref로 지정하고 , 보여질 영화를 Index만큼 slice로 자릅니다.

   🧨 다른 방안
   this.visibleIdx...부분을 exios요청으로 추가 데이터를 받는 방식으로 하는 방안도 좋습니다.

<template>
  <div ref="scrollcheck">
    <article 
        v-for="movie in filteredMovies.slice(0, visibleIdx)"
        :key="movie.id"
      >
        <MovieItem :movie="movie"/>
    </article>
  </div>
</template>
export default {
  data() {
    return {
      visibleIdx: 100, // 보여질 영화의 개수 
    }
  },
  methods:{
    handleScroll() {
      if (this.$refs.scrollcheck.scrollHeight - (window.innerHeight + window.scrollY) < 1000){
          this.visibleIdx += 100 // 보여질 영화의 개수를 추가한다.
      }
    }
  }
}

3. 스크롤을 할 때 감시하고 있던 이벤트리스너를 삭제합니다.

   🧨 삭제해야하는 이유
   삭제하지 않으면, 컴포넌트가 생성될 때마다 이벤트리스너가 생성되고, 다른 페이지에 갔을 때도 이벤트리스너가 계속 감시하고 있어 해당 오류가 발생합니다.
   

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