인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다. 최호연님.

무한 스크롤을 구현할 때 v-intersectionObserver 디렉티브를 사용하신 것 같습니다. 이 디렉티브는 특정 요소가 뷰포트 내에 진입하거나 나갈 때 콜백 함수를 실행시키는 역할을 합니다.

말씀하신 문제가 발생하는 이유는, height가 없는 상태에서는 div 요소가 화면에 항상 노출되어 있기 때문입니다. IntersectionObserver는 해당 요소가 뷰포트 내에 있음을 계속해서 감지하게 되고, 따라서 loadMore() 함수가 여러 번 호출되어 모든 게시물이 한 번에 로드되는 것입니다.

무한 스크롤의 올바른 동작을 위해서는 다음과 같은 방법을 사용할 수 있습니다:
1. 높이 조정: div의 높이를 명시적으로 설정하여 뷰포트 하단에 도달할 때만 IntersectionObserver가 트리거되도록 합니다. 현재 height: 100px으로 설정되어 있을 때 동작이 제대로 된다고 하신 점을 고려하면, 이 설정을 유지하는 것이 좋을 것 같습니다.

2. 마진 사용: margin이나 padding을 적절히 사용하여 요소가 뷰포트 내에서 약간의 여유 공간을 갖도록 조정할 수 있습니다.

3. 비율 설정: IntersectionObserver의 옵션으로 threshold 옵션을 활용하여 요소가 얼마나 보일 때 콜백이 실행될지를 결정할 수도 있습니다.

유사한 질문과 해결 방법에 대한 링크를 참조하시길 권장합니다:

• Vue.js의 Intersection Observer를 활용한 무한 스크롤 구현에서는 코드를 통해 구현된 예제를 살펴보실 수 있습니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

네, 맞아요! 높이가 0이 되면서 계속 노출되어 loadMore()가 연속 실행되는 것이 원인입니다.

해결방법

최소 높이 설정:

<div 
  v-intersectionObserver="handleIntersectionObserver" 
  class="bg-primary"
  style="height: 1px;"
></div>

또는 로딩 상태로 중복 호출 방지:

const isLoading = ref(false)

const handleIntersectionObserver = async ([{ isIntersecting }]) => {
  if (isIntersecting && !isLoading.value) {
    isLoading.value = true
    await loadMore()
    isLoading.value = false
  }
}

핵심은 트리거 요소가 항상 보이지 않도록 최소한의 높이를 주거나, 중복 실행을 막는 플래그를 사용하는 것입니다.