[React] 두 가지 방법으로 구현해보는 무한 스크롤 Infinite Scroll

1) 스크롤 이벤트를 사용한 방법

---

무한 스크롤은 현재 페이지에서 스크롤바가 마지막 콘텐츠 지점에 있을 때 다음 콘텐츠를 자동으로 불러오는 구현 방식을 말한다. ➊스크롤해서 가려진 영역의 높이와 ➋현재 화면(뷰포트)의 높이를 더한 값이 ➌전체 문서의 높이와 같다면 현재 스크롤이 가장 하단 끝에 도달했다는 걸 알 수 있다.

 

알아야 할 기하 프로퍼티

 

❶ 스크롤해서 가려진 콘텐츠 영역의 높이 : document.documentElement.scrollTop

 

❷ 현재 화면(뷰포트)의 높이

• window.innerHeight : 스크롤바 포함
• document.documentElement.clientHeight : 스크롤바 제외

 

❸ 전체 문서의 높이

// 문서의 정확한 전체 높이를 구하기 위한 코드
const scrollHeight = Math.max(
  document.body.scrollHeight,
  document.documentElement.scrollHeight,
  document.body.offsetHeight,
  document.documentElement.offsetHeight,
  document.body.clientHeight,
  document.documentElement.clientHeight,
);

 

왜 이런 방식으로 문서 전체 높이를 구해야 하는 걸까요? 이유는 알아보지 않는 게 낫습니다.
이런 이상한 계산법은 아주 오래 전부터 있었고 그다지 논리적이지 않은 이유로 만들어졌기 때문입니다.
— JavaScript Info

 

Custom Hook 작성

컴포넌트에 무현 스크롤 구현 코드를 직접 작성하기보단 재사용할 수 있도록 Custom Hook으로 만드는 게 좋다. 무한 스크롤 Custom Hook은 스크롤 이벤트를 감지해서 데이터를 더 받아올지 여부를 알려주는 역할을 한다.

 

➊스크롤 이벤트가 발생하면 현재 스크롤 위치가 전체 문서의 끝에 도달했는지 확인한다. ➋스크롤이 문서 끝에 위치 했다면 isFetching 상태를 true로 변경하고, ➌파라미터로 받은 callback을 호출한다. callback 함수는 다음 데이터를 받아오는 작업을 수행한다.

// useInfiniteScroll.js
import { useEffect, useState } from 'react';
import { getScrollHeight } from '../../lib/utils';

const useInfiniteScroll = (callback) => {
  const [isFetching, setIsFetching] = useState(false);

  const handleScroll = () => {
    // ⑵ 스크롤 이벤트가 발생하면 전체 문서의 끝에 위치했는지 확인
    const scrollHeight = getScrollHeight(); // 전체 문서의 높이를 구하는 유틸 함수
    const currentScroll = window.innerHeight + document.documentElement.scrollTop;
    if (currentScroll === scrollHeight && !isFetching) setIsFetching(true);
  };

  useEffect(() => {
    // ⑴ 스크롤 이벤트 감지
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    if (isFetching) callback(); // ⑶ 다음 데이터를 불러오는 callback 실행
  }, [isFetching]);

  return [isFetching, setIsFetching];
};

export default useInfiniteScroll;

 

Custom Hook 적용

리스트를 출력하는 InfiniteScrollNonIO 컴포넌트에선 다음 데이터를 받아오는 작업을 수행하는 함수를 Custom Hook의 인자(callback)로 넘긴다. 그럼 스크롤이 문서 끝에 도달했을 때 인자로 넘긴 함수가 실행되고 다음 데이터를 받아온 후 화면에 렌더링한다.

 

다음 데이터를 받아오는 작업을 수행하기 전 커스텀 훅 안에선 먼저 isFetching 상태를 true로 변경한 후 반환한다. 이를 받은 InfiniteScrollNonIO 컴포넌트는 “로딩 중...” 문구를 표시한다. 데이터를 모두 받아오면 isFetching 상태가 변경돼서 “로딩 중...” 문구가 사라지고, 새로 받아온 데이터를 화면에 출력한다.

import React, { useState } from 'react';
import useInfiniteScroll from './useInfiniteScroll';

// InfiniteScrollNonIO.js
export default function InfiniteScrollNonIO() {
  const [listItems, setListItems] = useState(
    Array.from(Array(30).keys(), (n) => n + 1),
  );
  const [isFetching, setIsFetching] = useInfiniteScroll(fetchMoreListItems);

  function fetchMoreListItems() {
    setTimeout(() => {
      setListItems((prevState) => [
        ...prevState,
        ...Array.from(Array(20).keys(), (n) => n + prevState.length + 1),
      ]);
      setIsFetching(false);
    }, 2000); // 2초간 딜레이
  }

  return (
    <section className="flex flex-col justify-center items-center p-4">
      <ul className="space-y-4 mb-4">
        {listItems.map((item, i) => (
          <li
            key={i}
            className="border text-center w-56 h-12 grid place-content-center"
          >
            List Item {item}
          </li>
        ))}
      </ul>
      <div className={`${isFetching ? 'visibility' : 'invisible'}`}>
        🔍️ Fetching more items...
      </div>
    </section>
  );
}

 

🔍️ Array.keys() 메서드는 배열의 각 인덱스를 키 값으로 가지는 새로운 Array Iterator 객체(next 메서드가 구현되어 있는 이터레이터 객체)를 반환한다. 이터러블이므로 for of 반복문으로 순회할 수 있다.

for (const key of Array(3).keys()) console.log(key); // 0, 1, 2
Array.from(Array(3).keys(), (n) => n * 2); // [0, 2, 4]

 

스로틀 적용

💡 디바운스는 input 이벤트에(리액트에선 onChange), 스로틀은 scroll 이벤트에 자주 사용된다.

 

화면을 스크롤할 때마다 스크롤 이벤트의 핸들러가 끊임없이 호출된다. 불필요한 호출이 많으므로 스로틀을 적용해서 일정 간격으로만 핸들러가 호출되도록 수정한다. 스로틀 함수는 여러 곳에서 사용할 수 있도록 아래처럼 유틸 함수로 분리해서 사용한다.

// utils.js
export const throttle = (callback, ms) => {
  let timeout;

  // 이벤트 핸들러에 할당될 함수
  return function (...args) {
    if (!timeout) {
      timeout = setTimeout(() => {
        callback(...args);
        timeout = null;
      }, ms);
    }
  };
};

 

useInfiniteScroll 커스텀 훅에서 스로틀 함수를 불러온 후, 기존 handleScroll 핸들러를 throttle 함수의 인자(콜백)로 넘긴다. 그럼 handleScroll 변수엔 throttle 함수가 반환한 내부 함수가 할당된다. 즉, 이벤트 핸들러엔 throttle 함수가 반환한 내부 함수가 할당되도록 한다.

 

1. 스크롤 이벤트가 발생하면 내부 함수 인자 (...args)로 이벤트 객체가 전달된다.
2. 타이머 ID가 없다면 ms초 뒤에 인자로 받은 콜백 handleScroll 함수를 실행한다.
3. 타이머 ID가 할당된 상태에서 또 다른 스크롤 이벤트를 받으면 아무일도 일어나지 않는다.

 

import { getScrollHeight, throttle } from '../../lib/utils';

// useInfiniteScroll.js
const useInfiniteScroll = (callback) => {
  // ...생략

  const handleScroll = throttle(
    (/* event */) => {
      const scrollHeight = getScrollHeight();
      const currentScroll = window.innerHeight + document.documentElement.scrollTop;
      if (currentScroll === scrollHeight && !isFetching) setIsFetching(true);
    },
    500,
  );

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // ...생략
};

export default useInfiniteScroll;

 

💡 이벤트를 등록했을 때와 동일한 핸들러와 capture 옵션을 명시해야 이벤트 리스너를 제거할 수 있다. 이벤트 리스너 인자에 throttle(handleScroll, 500) 형태로 작성하면 이벤트 등록 / 제거에 등록한 핸들러가 다르므로(throttle 함수가 반환한 내부 함수의 주소값이 각각 다름) 이벤트 리스너가 제거되지 않는다. 더 자세한 내용은 링크 참고.

 

Memory Leak 오류 해결

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup

 

스크롤이 화면 끝에 도달하면 ms초 후 실행되는 콜백(handleScroll)을 예약한다. 이때 router를 이동(뒤로가기 등)하면 위 에러가 발생한다. router 이동 후, 이전 컴포넌트에서 예약한 콜백이 실행돼서 상태(isFetching) 변경을 시도하기 때문에 발생하는 에러다.

 

이 에러는 언마운트 후 상태 변경을 유발하는 isFetching 상태를 false로 변경하는 코드를 useEffect의 클린업 함수에 추가하면 해결할 수 있다. — 참고글

// useInfiniteScroll.js
import { getScrollHeight, throttle } from '../../lib/utils';

const useInfiniteScroll = (callback) => {
  // ...생략

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      setIsFetching(false); // Can't perform a React state update... 오류 대응
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
};

export default useInfiniteScroll;

 

레퍼런스

• How to Build an Infinite Scroll Component in React Using Hooks
• How To Create a Custom useInfiniteScroll() With React Hooks

 

2) Intersection Observer API를 이용한 방법 ⭐️

---

Intersection Observer는 타겟 요소가 뷰포트(혹은 다른 부모 요소)에 노출됐는지 여부를 알려주는 API다. 무한 스크롤, Lazy Loading, 광고 가시성(광고 노출 여부를 파악해서 광고 수익 계산) 등을 구현할 때 활용할 수 있다. 사용법도 간단하고 성능도 좋다. 이를 직접 구현하려면 scroll 이벤트가 발생할 때마다 지정한 요소가 화면에 존재하는지 계산하는 코드를 작성해야 된다.

 

Intersection Observer API는 타겟 요소가 뷰포트에 노출됐는지 여부를 알려준다

// 예시 코드
const options = { threshold: 1.0 };
const callback = (entries, observer) => { // ⑶
  // entries: 관찰 중인 모든 대상이 담긴 배열, observer: 관찰자 객체
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // ⑷ 화면 안에 타겟 요소가 들어왔는지 체크
      observer.unobserve(entry.target); // ⑸ 구독 해제(해당 타겟은 더이상 관찰하지 않음)
      console.log('화면에서 노출됨');
    } else {
      console.log('화면에서 제외됨');
    }
  });
};
const observer = new IntersectionObserver(callback, options); // ⑴ IO 객체(인스턴스) 생성
observer.observe(document.querySelector('.element')); // ⑵ 관찰 대상 추가

 

1. 콜백과 옵션을 인자로 받아 Intersection Observer 객체(인스턴스) 생성.
2. 관찰 대상으로 지정할 타겟 요소 추가. 이때 IO 객체에 등록한 콜백이 1회 실행된다.
3. 타겟 요소가 threshold 옵션에 정의한 퍼센트만큼 화면에 노출되거나 사라지면 콜백 함수 호출
4. 콜백 함수의 인자로 전달받은 entries 배열을 통해 노출 여부 확인
5. 타겟 요소를 더이상 관찰할 필요가 없다면 observer.unobserve 메서드로 구독(관찰) 해제

 

콜백 톺아보기

관찰할 대상을 등록하거나, 타겟 요소의 가시성(노출 / 비노출)에 변화가 생기면, 콜백 함수를 호출하고 콜백의 첫번째 인자엔 Intersection Observer Entry 객체가 담긴 배열이 전달된다. 타겟이 처음 지정되면(관찰 대상 등록) 모든 요소의 가시성을 체크하기 때문에 관찰 중인 모든 타겟 요소를 Entry 배열에 넣어 콜백을 호출한다. 콜백 함수의 두번째 인자는 관찰자 객체를 받는다.

 

• entries : 관찰 중인 모든 대상이 담긴 배열 (Intersection Observer Entry 인스턴스의 배열)
• observer : 관찰자 객체 (콜백 함수가 실행되고 있는 observer 인스턴스 참조)

 

(콜백의 첫번째 인자) entries 속성

1개의 Intersection Observer Entry 객체엔 아래 속성들이 정의되어 있다.

❶ target : 관찰 대상 요소

❷ time : 교차 상태 변경(노출 / 비노출)이 발생한 시간을 나타내는 DOMHighResTimeStamp  

❸ isIntersecting : 노출 여부 — target과 root(뷰포트)가 교차 상태인지 여부 true|false

이미지 출처 HEROPY Tech

❹ intersectionRatio : 노출된 비율 — target과 root가 얼마나 교차되고 있는지의 백분율(0~1)

❺ intersectionRect : 노출된 영역 — target과 root가 교차되고 있는 영역의 정보

❻ boundingClientRect : target 요소 정보 top, right, bottom, left, width, height, x, y 

이미지 출처 HEROPY Tech

❼ rootBounds : root 요소 정보. IO 생성 옵션의 root를 지정하지 않았다면(기본값) viewport 크기

 

(콜백의 두번째 인자) observer 메서드

• observe(target) : 대상 요소의 관찰 시작
• unobserve(target) : 대상 요소의 관찰 중지
• disconnect() : IntersectionObserver 인스턴스가 관찰하는 모든 요소의 관찰 중지
• takeRecords() : IntersectionObserverEntry 객체의 배열 반환 (사용할 일 거의 없음)

 

Observer 객체 생성 옵션 톺아보기

Intersection Observer 생성 시 아래 3가지 옵션을 설정할 수 있다.

 

❶ root : 노출 / 비노출 여부를 어떤 요소를 기준으로 할지 지정하는 옵션. 기본값(null)은 뷰포트. 만약 타겟 요소가 root로 지정한 요소의 자식으로 있지 않다면 화면에 노출되더라도 노출로 여기지 않음.

 

❷ rootMargin : 바깥 여백(Margin)을 이용해 Root 범위를 확장 / 축소하는 옵션. threshold는 지정한 rootMargin 만큼 더해서 계산된다. 기본값은 0px 0px 0px 0px (px 혹은 % 단위 필수 입력).

이미지 출처 HEROPY Tech

 

❸ threshold : 화면에 얼만큼 노출돼야 콜백 함수를 호출할지 결정하는 옵션으로 기본값은 0(0%). 최대 1(100%)까지 지정 가능. Array<number> 형태로 여러 비율을 지정할 수도 있다.

이미지 출처 HEROPY Tech

• 기본값(0)일 땐 타겟 요소가 1px라도 보이면 콜백을 호출한다. 
• 0.5로 지정하면 화면에 50% 이상 보일때부터 콜백을 호출한다. 
• 배열로 지정하면 각 비율로 노출될 때마다 콜백을 호출한다. e.g. { threshold: [0, 0.2] }

 

React에 적용하기

렌더링 리스트 가장 아래에 빈 요소를 추가하고, Intersection Observer를 이용해 관찰 대상으로 등록한다. 스크를이 가장 하단에 도달하면(target과 root의 교차 시점) IO에 등록한 콜백이 실행되고 다음 데이터를 불러오는 작업(혹은 page 상태 +1 → 해당 page에 대한 데이터 요청)을 수행하도록 작성하면 된다.

 

❶ Intersection Observer 객체에 등록할 콜백 함수 정의

export default function InfiniteScrollIO() {
  const [isFetching, setIsFetching] = useState(false);
  const [listItems, setListItems] = useState(
    Array.from(Array(30).keys(), (n) => n + 1),
  );

  // Intersection Observer 콜백 정의(useCallback 적용은 选项)
  // (인자1) entries: 관찰 중인 모든 대상이 담긴 배열, (인자2) observer: 관찰자 객체
  const handleObserver = useCallback((entries, observer) => {
    const target = entries[0]; // 리스트 가장 아래의 빈요소

    if (target.isIntersecting) {
      // 화면 안에 타겟 요소가 들어왔는지 체크
      setIsFetching(true); // '로딩 중' 표시
      setTimeout(() => {
        // (dummy) 데이터 업데이트
        setListItems((prev) => [
          ...prev,
          ...Array.from(Array(20).keys(), (n) => n + prev.length + 1),
        ]);
        setIsFetching(false); // '로딩 중' 표시 해제
      }, 1000);
    }
  }, []);

  // ...
}

 

❷ Intersection Observer 객체 생성 / 콜백&옵션 등록

export default function InfiniteScrollIO() {
  // ...

  useEffect(() => {
    const options = {
      root: null, // 기본값 null(뷰포트)
      rootMargin: '30px', // 스크롤이 최하단에 도달했을즈음 다음 데이터를 불러오기 위해 rootMargin 설정
      threshold: 0, // 기본값 0(1px 라도 화면에 보이면 콜백 호출)
    };
    const observer = new IntersectionObserver(handleObserver, options); // 콜백&옵션 등록 및 IO 객체 생성
  }, []);

  // ...
}

 

❸ 빈 요소(리스트 가장 아래 요소)를 IO 관찰 대상으로 등록

export default function InfiniteScrollIO() {
  const loader = useRef(null);
  // ...
  useEffect(() => {
    // ...
    if (loader.current) observer.observe(loader.current); // 빈요소를 관찰 대상으로 등록
  }, []);

  return (
    <section className="flex flex-col justify-center items-center p-4">
      {/* ...생략 */}
      <div ref={loader} className="w-full" />
    </section>
  );
}

 

❹ 언마운트 로직 추가

export default function InfiniteScrollIO() {
  // ...
  useEffect(() => {
    // ...
    return () => {
      setIsFetching(false); // Can't perform a React state update... 오류 대응
      observer.disconnect(); // 언마운트시 모든 요소에 대한 관찰 중지
    };
  }, []);
  // ...
}

import React, { useCallback, useEffect, useRef, useState } from 'react';

export default function InfiniteScrollIO() {
  const [isFetching, setIsFetching] = useState(false);
  const [listItems, setListItems] = useState(
    Array.from(Array(30).keys(), (n) => n + 1),
  );
  const loader = useRef(null);

  // Intersection Observer 콜백 정의(useCallback 적용은 选项)
  // (인자1) entries: 관찰 중인 모든 대상이 담긴 배열, (인자2) observer: 관찰자 객체
  const handleObserver = useCallback((entries, obersver) => {
    const target = entries[0]; // 리스트 가장 아래의 빈요소

    if (target.isIntersecting) {
      // 화면 안에 타겟 요소가 들어왔는지 체크
      setIsFetching(true); // '로딩 중' 표시
      setTimeout(() => {
        // (dummy) 데이터 업데이트
        setListItems((prev) => [
          ...prev,
          ...Array.from(Array(20).keys(), (n) => n + prev.length + 1),
        ]);
        setIsFetching(false); // '로딩 중' 표시 해제
      }, 1000);
    }
  }, []);

  useEffect(() => {
    const options = {
      root: null, // 기본값 null(뷰포트)
      rootMargin: '30px', // 스크롤이 최하단에 도달했을즈음 다음 데이터를 불러오기 위해 rootMargin 옵션 설정
      threshold: 0, // 기본값 0(1px 라도 화면에 보이면 콜백 호출)
    };
    const observer = new IntersectionObserver(handleObserver, options); // 콜백&옵션 등록 및 IO 객체 생성
    if (loader.current) observer.observe(loader.current); // 빈요소를 관찰 대상으로 등록

    return () => {
      setIsFetching(false); // Can't perform a React state update... 오류 대응
      observer.disconnect(); // 언마운트시 모든 요소에 대한 관찰 중지
    };
  }, []);

  return (
    <section className="flex flex-col justify-center items-center p-4">
      <ul className="space-y-4 mb-4">
        {listItems.map((item, i) => (
          <li
            key={i}
            className="border text-center w-56 h-12 grid place-content-center"
          >
            List Item {item}
          </li>
        ))}
      </ul>
      <div className={`${isFetching ? 'visibility' : 'invisible'}`}>
        🔍️ Fetching more items...
      </div>
      <div ref={loader} className="w-full" />{' '}
      {/* 화면 노출 여부 확인을 위한 빈요소 */}
    </section>
  );
}

 

Hook으로 분리하기 ⭐️

Intersection Observer API는 무한 스크롤은 물론 Lazy Loading, 광고 가시성 확인 등 다양한 곳에서 사용하므로 커스텀 Hook으로 분리해서 재사용하면 좋다. 커스텀 Hook의 인자는 아래 3개를 받도록 작성한다. 함수 호출시 인자 순서에 구애받지 않도록 RORO 패턴으로 작성한다.

 

1. callback : 교차 상태에서 실행할 로직이 담긴 콜백 함수
2. unObserver : 교차 상태 후 해당 타겟의 관찰을 중지할지 여부. true | false
   💡 무한스크롤은 교차 상태 이후에도 가장 하단의 빈 요소를 계속 관찰해야 하지만(false), Lazy Loading 등을 구현할 땐 이미 화면에 노출돼서 이미지를 로드한 상태면 더이상 관찰할 필요가 없다(true).
3. options : Intersection Observer 인스턴스 생성 시 넘길 옵션

 

커스텀 Hook은 Ref 객체를 반환하도록 한다. 그럼 Hook을 호출하는 컴포넌트에서 Ref 객체를 받은 뒤 관찰하고 싶은 컴포넌트의 ref 속성에 바로 할당하면 된다. 사용하기 더 편하다

// 코드 일부 참고 : https://mrcoles.com/intersection-observer-react-hook/
// hooks/useIntersectionObserver.js
import { useCallback, useEffect, useRef } from 'react';

export default function useIntersectionObserver({
  callback,
  unObserve = false,
  options = {
    root: null, // 노출&비노출 여부를 어떤 요소를 기준으로 할지 지정하는 옵션. 기본값 null(뷰포트)
    rootMargin: '0px', // 바깥 여백(Margin)을 이용해 Root 범위를 확장/축소하는 옵션. 기본값 0px
    threshold: 0, // 화면에 얼만큼 노출돼야 콜백 함수를 호출할지 결정하는 옵션. 기본값 0(1px 라도 화면에 보이면 콜백 호출)
  },
}) {
  const ioRef = useRef(null);

  // Intersection Observer 콜백 정의(useCallback 적용은 选项)
  // (인자1) entries: 관찰 중인 모든 대상이 담긴 배열, (인자2) observer: 관찰자 객체
  const ioHandler = useCallback((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 화면 안에 타겟 요소가 들어왔는지 체크
        callback(); // 교차 시점에(관찰 대상이 뷰포트에 노출) 인자로 받은 콜백 호출
        if (unObserve) observer.unobserve(entry.target); // (조건 만족시) 해당 타겟은 관찰 중지
      }
    });
  }, []);

  useEffect(() => {
    if (window.IntersectionObserver) {
      const observer = new IntersectionObserver(ioHandler, options); // 콜백&옵션 등록 및 IO 객체 생성
      observer.observe(ioRef.current); // 인자로 넘긴 요소를 관찰 대상으로 등록

      return () => observer.disconnect(); // 언마운트시 모든 요소에 대한 관찰 중지
    }
  }, []);

  return ioRef;
}

// 코드 일부 참고 : https://mrcoles.com/intersection-observer-react-hook/
// hooks/useIntersectionObserver.tsx
import { useCallback, useEffect, useRef } from 'react';

interface IOProps {
  callback: VoidHandler;
  unObserve?: boolean;
  options?: IntersectionObserverInit;
}

export default function useIntersectionObserver<T extends HTMLElement>({
  callback,
  unObserve = false,
  options = {
    root: null, // 노출&비노출 여부를 어떤 요소를 기준으로 할지 지정하는 옵션. 기본값 null(뷰포트)
    rootMargin: '0px', // 바깥 여백(Margin)을 이용해 Root 범위를 확장/축소하는 옵션. 기본값 0px
    threshold: 0, // 화면에 얼만큼 노출돼야 콜백 함수를 호출할지 결정하는 옵션. 기본값 0(1px 라도 화면에 보이면 콜백 호출)
  },
}: IOProps) {
  const ioRef = useRef<T>(null);

  // Intersection Observer 콜백 정의(useCallback 적용은 选项)
  // (인자1) entries: 관찰 중인 모든 대상이 담긴 배열, (인자2) observer: 관찰자 객체
  const ioHandler: IntersectionObserverCallback = useCallback(
    (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 화면 안에 타겟 요소가 들어왔는지 체크
          callback(); // 교차 시점에(관찰 대상이 뷰포트에 노출) 인자로 받은 콜백 호출
          if (unObserve) observer.unobserve(entry.target); // (조건 만족시) 해당 타겟은 관찰 중지
        }
      });
    },
    [callback, unObserve],
  );

  useEffect(() => {
    if (!window.IntersectionObserver || !ioRef.current) return undefined;
    const observer = new IntersectionObserver(ioHandler, options); // 콜백&옵션 등록 및 IO 객체 생성
    observer.observe(ioRef.current); // 인자로 넘긴 요소를 관찰 대상으로 등록

    return () => observer.disconnect(); // 언마운트시 모든 요소에 대한 관찰 중지
  }, [ioHandler, options]);

  return ioRef;
}

 

커스텀 Hook을 호출하는 컴포넌트에선 callback options을 Hook의 인자로 넘긴다. callback은 기존 작성했던 handleObserver 함수의 본문만 옮겨주면 된다. unObserve 인자는 명시하지 않았으므로 기본값 false가 지정된다. 그럼 관찰 대상이 화면에 노출된 이후에도 관찰을 중지하지 않는다.

import useIntersectionObserver from '../../hooks/useIntersectionObserver';

// components/InfiniteScrollIO.js
export default function InfiniteScrollIO() {
  // ...생략

  const loaderRef = useIntersectionObserver({
    callback: () => {
      setIsFetching(true);
      setTimeout(() => {
        /* (dummy) 데이터 업데이트 코드 생략 */
      }, 1000);
    },
    options: { rootMargin: '30px' }, // 스크롤이 최하단에 도달했을즈음 다음 데이터를 불러오기 위해 rootMargin 설정
  });

  useEffect(() => {
    return () => setIsFetching(false); // Can't perform a React state update... 오류 대응
  }, []);

  return (
    <section className="flex flex-col justify-center items-center p-4">
      {/* ...생략 */}
      <div ref={loaderRef} className="w-full" />{' '}
      {/* 화면 노출 여부 확인을 위한 빈요소 */}
    </section>
  );
}

import React, { useEffect, useState } from 'react';
import useIntersectionObserver from '../../hooks/useIntersectionObserver';

// components/InfiniteScrollIO.js
export default function InfiniteScrollIO() {
  const [isFetching, setIsFetching] = useState(false);
  const [listItems, setListItems] = useState(
    Array.from(Array(30).keys(), (n) => n + 1),
  );

  const loaderRef = useIntersectionObserver({
    callback: () => {
      setIsFetching(true);
      setTimeout(() => {
        setListItems((prev) => [
          ...prev,
          ...Array.from(Array(20).keys(), (n) => n + prev.length + 1),
        ]);
        setIsFetching(false);
      }, 1000);
    },
    options: { rootMargin: '30px' }, // 스크롤이 최하단에 도달했을즈음 다음 데이터를 불러오기 위해 rootMargin 설정
  });

  useEffect(() => {
    return () => setIsFetching(false); // Can't perform a React state update... 오류 대응
  }, []);

  return (
    <section className="flex flex-col justify-center items-center p-4">
      <ul className="space-y-4 mb-4">
        {listItems.map((item, i) => (
          <li
            key={i}
            className="border text-center w-56 h-12 grid place-content-center"
          >
            List Item {item}
          </li>
        ))}
      </ul>
      <div className={`${isFetching ? 'visibility' : 'invisible'}`}>
        🔍️ Fetching more items...
      </div>
      <div ref={loaderRef} className="w-full" />{' '}
      {/* 화면 노출 여부 확인을 위한 빈요소 */}
    </section>
  );
}

 

구현 화면 GIF

 

IO Custom hook ver.2 ⭐️

@hyesungoh 블로그에서 우연히 발견한 코드. 관찰할 요소의 레퍼런스가 담길 target 변수를 useState 상태에 할당하고, 상태 설정 함수 자체를 관찰 대상 요소의 ref 속성에 할당하는 방식. ref가 설정 / 해제될 때 특정 작업을 수행하도록 하기 위해 callback ref 방법을 사용한 것. 코드를 더 깔끔하게 작성할 수 있다.

 

import useIntersectionObserver from 'hooks/useIntersectionObserver';

const Foo = () => {
  const onIntersect: IntersectionObserverCallback = ([{ isIntersecting }]) => {
    console.log(`감지결과 : ${isIntersecting}`);
  };

  // 커스텀 훅 사용
  const { setTarget } = useIntersectionObserver({ onIntersect });

  return <div ref={setTarget}></div>;
};

코드 참고 via hyesungoh.log

import { useEffect, useState } from 'react';

// useIntersectionObserver.ts
interface UseIntersectionObserverProps {
  root?: null;
  rootMargin?: string;
  threshold?: number;
  onIntersect: IntersectionObserverCallback;
}

const useIntersectionObserver = ({
  root,
  rootMargin = '0px',
  threshold = 0,
  onIntersect,
}: UseIntersectionObserverProps) => {
  const [target, setTarget] = useState<HTMLElement | null>(null);

  useEffect(() => {
    if (!target) return undefined;

    const observer: IntersectionObserver = new IntersectionObserver(
      onIntersect,
      { root, rootMargin, threshold },
    );
    observer.observe(target);

    return () => observer.unobserve(target);
  }, [onIntersect, root, rootMargin, target, threshold]);

  return { setTarget };
};

export default useIntersectionObserver;

 

레퍼런스

• [react] Infinite Scroll 구현하기
• Intersection Observer 간단 정리하기
• Intersection Observer - 요소의 가시성 관찰
• 내가 Intersection Observer 사용하는 방법  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요