[Vue] Lazy Loading 무한스크롤 구현하기 (Intersection Observer)

 

🎈 Lazy Loading을 구현해본 방법

Vue 기반 프로젝트를 진행하면서, Lazy Loading을 적용해볼 기회가 있었다.

두 가지 방법을 적용해봤는데, 

 

1. 백엔드에 전체 데이터를 요청해서, 프론트 단에서 Chunk로 잘라서 보여주기

2. 백엔드에 부분적으로 다음 데이터를 요청해와서 보여주기

 

데이터가 1000~2000개 정도였을 때는 1번도 무리 없이 동작 했었다.

 

그런데 4000~5000개 이상 넘어가기 시작하니까,

백엔드에서 정보를 불러오는데도 오래걸리고 (특히 네트워크가 느린 곳에서는 더더욱),

프론트 단에서 후처리하는데도 메모리를 많이 잡아먹기 시작했다.

그래서 두번째 방법을 적용하기로 결정!

 

---

두번째 방법에는 구현 방법이 여러가지가 있는데,

처음에는 'Scroll 이벤트'를 발생시켜서 전체 창 사이즈와 현재 위치를 비교해야하나 고민했었다.

물론, 이 방법이 불가능한건 아니지만, scroll 이벤트가 무수히 많이 발생한다는 점에 부하가 걸릴 것은 분명했다.

scroll 이벤트에 `debounce` 나 `throttle`을 적용하는 방법도 생각해봤지만, 

Intersection Observer라는 API가 있다는 것을 알게됐고,

이 API를 적용하면 `debounce`, `throttle` 없이도 성능에 무리가 없다는 것을 알게되어 내겐 굉장한 혁신이었다.

 

✨ Debounce 
이벤트가 중복으로 발생할 경우, 최초 혹은 마지막 이벤트만 실행하도록 제어하는 설정


✨ Throttle
이벤트를 일정 시간동안 한번만 실행되도록 제어하는 설정

---

💎 Intersection Observer API

• Intersection Observer API : 교차 관찰자 API
  • 내가 관찰자로 지정해놓은 요소가 사용자의 화면에 노출되었는지를 알려주는 API

🎁 사용 방법

1. Observer.vue 생성

<template>
  <div ref="trigger"></div>
</template>
<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue';

let observer = null;
let observerOptions = {
  root: null,
  rootMargin: '0px',  // 트리거 Margin 영역
  threshold: 0.1,  // 트리거가 화면에 얼마나 보였을 때 감지할 것인지 (0.1 = 10%)
};
const emits = defineEmits(['show', 'hidden']);
onMounted(() => {
  createObserver();  // Observer 등록하는 함수로 연결
});
onBeforeUnmount(() => {
  observer.disconnect();  // Observer 연결 해제
});

const trigger = ref();
const createObserver = () => {
  observer = new IntersectionObserver(entries => {  // 부모로 emits
    if (entries[0].isIntersecting) {
      emits('show');
    } else {
      emits('hidden');
    }
  }, observerOptions);

  observer.observe(trigger.value);
};
</script>

 

2. 사용하고 싶은 곳에서 사용

<template>
<div>
  <div class="lazy-loading-container">
    <div class="lazy-loading-data" v-for="(imageSrc, index) in rData.imageList" :key="index">
      <img :src="imageSrc" alt="" />
    </div>
    <Observer @show="loadMore" />
  </div>
</div>
</template>
<script setup>
import Observer from "@/components/Observer.vue";
import {reactive} from "vue";

const rData = reactive({imageList: [], page: 1});
const loadMore = async () => {
 const fetchData = await getAllImageList(rData.page + 1);
 if (fetchData) {
   rData.imageList = [...rData.imageList, ...fetchData];
   rData.page += 1;
 }
};
</script>

 

 

---

✔ 참고한 사이트

 

https://velog.io/@rladpwl0512/lazy-loading의-무한-스크롤을-Intersection-Observer-API를-통해-구현하기

https://velog.io/@godud2604/이미지-최적화-Lazy-Load-Intersection-Observer-API

https://samsara1019.tistory.com/77

https://velog.io/@jejualrock/무한스크롤-클라이언트

https://sso-feeling.tistory.com/684