Vue에서 Intersection Observer를 활용한 무한 스크롤 구현하기

Intersection Observer 란?

브라우저의 자바스크립트 API 중 하나입니다. 엘리먼트의 가시성 변화를 감지할 수 있습니다.

예전에는 스크롤 이벤트를 통해서 스크롤 페이징을 구현하였는데, 브라우저 과부하를 일으켜서 성능 저하가 일어나기도 하였습니다.

하지만 Intersection Observer API를 브라우저의 내부 로직을 이용하여 엘리먼트의 가시성 변화를 감지할 수 있어서 성능이 좋고 효율적으로 무한 스크롤을 구현할 수 있습니다.

 

언제 사용하면 좋은지?

1. 무한스크롤 구현

사용자가 스크롤을 할 때 새로운 내용을 동적으로 로드할 수 있습니다. 무한스크롤을 이용하면 페이지 로딩 속도를 개선할 수 있고 부드러운 사용자 경험을 제공할 수 있습니다.

 

2. 이미지/광고 로딩 최적화

화면에 보일때까지 이미지 로딩 지연 시킬 수 있습니다. 초기 페이지 개선 속도를 향상할 수 있습니다.

 

Vue에서 무한 스크롤 구현하기

1. Observer 컴포넌트 구현하기

- IntersectionObserver 객체 초기화

- 감시 이후 관찰 대상이 교차 됐을 때 상위 컴포넌트로 이벤트 호출

 

Observer.vue

<template>
    <div ref="observerElement"></div>
</template>

<script>
export default {
  data() {
    return {
      observer: null,
      observerOptions: {
        rootMargin: '0px',
        threshold: 1.0
      }
    };
  },
  mounted() {
    this.createObserver();
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  },
  methods: {
    createObserver() {
      this.observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
          // 관찰 대상이 교차되었을 때 intersect 이벤트를 호출합니다.
          this.$emit('show');
        } else {
          this.$emit('hidden');	
        }
      }, this.observerOptions);

      const observerElement = this.$refs.observerElement;
      this.observer.observe(observerElement);
    }
  }
};
</script>

2. Observer 컴포넌트 사용

intersect 이벤트 호출 하게 되면 새롭게 아이템을 로드합니다.

 

App.vue

<script setup>
import Observer from './components/Observer.vue'
</script>

<template>
  <main>
    <div v-for="(item, index) in items" :key="index">
      <!-- 아이템 렌더링 내용 -->
      {{ item }}
    </div>
    <Observer @show="loadItems"></Observer>
  </main>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    this.loadItems()
  },
  methods: {
    loadItems() {
      for (let i = 0; i < 20; i++) {
        this.items.push(`아이템 ${this.items.length + 1}`);
      }
    },
  }
}

</script>

 

위와 같이 구현하게 되면 Observer 컴포넌트가 노출 될 때마다 intersect 이벤트가 호출되게 되고

새롭게 아이템을 로드하는 모습을 확인 할 수 있습니다.