리액트 상에서 Intersection Observer API를 사용하여 Infinite Scroll 기능 구현

Infinite Scroll 기능의 필요성

원래는 진행하던 프로젝트의 메인 페이지 내에서 추가 데이터를 서버에서 가져와 랜더링하는 방식은 Carousel Slide 였지만 관련 디자인 시안이 대폭 수정되었다.

 

이에 따라 데이터를 보여주는 방식이 특정 지점에 도달했을 때, 이를 인식해 서버에서 추가 데이터를 가져오는 Infinite Scroll 방식을 사용하기로 하였다.

 

처음에는 특정 지점을 계산하기 위해 ScrollingElement 내의 scrollTop값을 사용하였지만, 스크롤이 되는 속도에 따라 값이 항상 바뀌는 이슈와 scroll event 자체의 성능 저하 문제(동기적으로 이벤트 발생할 때마다 호출되는 콜백 함수)로 인해 Intersection Observer API를 사용해 보기로 했다.

 

Intersection Observer API

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

Intersection Observer API - Web API | MDN

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

 

Intersection Observer API 는 루트 요소와 타겟 요소의 교차점을 관찰하고 타겟 요소가 루트 요소와 교차하는지 아닌지를 구별하는 기능을 제공한다.

 

본 프로젝트에서는 끝 단에 도달했을 경우에는 서버에서 데이터를 가져오는 것이므로, 타겟에 해당하는 요소를 mainForm 컴포넌트에 추가혔다.

<div ref={target} className="targetElement">{isLoaded && <Loader />}</div>

 

• useRef를 통해 해당 요소를 타겟팅하여 이후 useEffect Hook에서 컴포넌트 마운트 및 업데이트 시 Intersection Observer API 인스턴스 생성
• Intersection Observer API 인스턴스 생성 시 인자 값으로 넘겨주기 위해 클래스명 지정
• 특정 지점에 닿을 경우, 서버에서 데이터를 가져오며 이는 비동기로 일어나기 때문에 시간이 소요될 수 있고 이를 위해 사용자에게 로딩 UI를 보여주기 위해 isLoaded state값이 true일 경우에 Loader 컴포넌트를 보여주도록 설정

Loader 컴포넌트는 프로젝트 전반에 쓰이기 때문에 react-loading을 사용하여 다음과 같이 별도의 모듈로 작성해두었다.

https://www.npmjs.com/package/react-loading

react-loading

import { memo } from "react";
import ReactLoading from "react-loading";
import styled from "styled-components";

const Loader = () => {
  return (
    <Container>
      <ReactLoading type="spin" color="#262f6a" /> //로딩 타입과 색상을 props로 지정
    </Container>
  );
};

const Container = styled.div`
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
`;

export default memo(Loader);

 

다음으론 해당 타겟 요소에 대한 Intersection Observer API 인스턴스를 생성해주기 위해 다음과 같이 코드를 작성하였다.

useEffect(() => {
    if (isIntersect && isLoaded) return;
    let observer;
    if (target.current) {
      observer = new IntersectionObserver(onIntersect);
      observer.observe(target.current);
    }

    return () => observer && observer.disconnect();
  }, [target.current, isIntersect, isLoaded]);

Container Component인 mainFormContainer 내에서 전달 받은 isLoaded state값과 isIntersect 값이 true일 경우에는 Oberver Intersection API 인스턴스를 생성하고 observer 메서드가 실행되는 연산 과정을 방지함으로써, 교차점에 닿았을 경우에 후속 과정이 연달아 일어나지 않도록 하였다.

 

(target.current를 의존성 배열에 넣었을 경우에, 콘솔에 waring message로 상시적으로 바뀌는 값이기 때문에 이를 사용하지 말라고 뜬다. 이후 리팩토링 시 해당 부분 또한 리팩토링할 생각이다)

 

그리고 인스턴스 생성 시 할당해준 콜백 함수인 onIntersect는 실제 redux-saga를 통해 데이터를 가져오는 역할을 하는 container component인 mainFormContainer에 선언해 주었다.

const onIntersect = async ([{ isIntersecting, target }], observer) => {
    if (isIntersecting) {
      observer.unobserve(target);
      dispatch(increaseOffset());
      setIntersect(true);
    }
  };

entries 는 IntersectionObserEntry 인스턴스를 담은 배열이며 위와 callback func에 첫 번째 파라미터로 전달이 된다.

 IntersectionObserEntry

해당 키 값 중 교차점이 되었는지 식별할 수 있는 값인 isIntersecting과 타겟 요소를 디스트럭쳐링 할당을 통해 필요에 맞게 가져왔다.

만약에 isIntersection 값이 true일 경우에는 우선 타겟 요소를 unobserver 메서드를 통해 할당을 해제해주어 중복을 방지하였다.

그리고 dispatch()를 통해 액션 생성 함수를 발생시켜 currentOffset 값을 가산해 주었다.

 

useSelector를 통해 redux-store 내에서 currentOffset값을 참조하고 해당 값이 업데이트 되었을 경우, 서버에서 데이터를 가져올 수 있도록 useEffect 내에 관련 함수를 추가하였다.

const currentOffset = useSelector(({ mainForm }) => mainForm.currentOffset);

	(...)

useEffect(() => {
    async function getMoreContents() {
      if (!isIntersect) return;

      dispatch(isLoaded());

      await new Promise(resolve => setTimeout(resolve, 1500));

      if (sort === "friends") {
        batch(() => {
          dispatch(friends(currentOffset));
        });
      } else {
        batch(() => {
          dispatch(content({ sort, currentOffset }));
          dispatch(rooms({ sort, currentOffset }));
        });
      }

      dispatch(isLoaded());
      setIntersect(false);
    }
    getMoreContents();
  }, [isIntersect, currentOffset]);

 

결과화면

 

참고 포스팅

https://choi95.tistory.com/56

Infinite Scroll

https://choi95.tistory.com/178

특정 값에 Entry 시 데이터 가져오기_Infinite Scroll

https://choi95.tistory.com/57

Debounce 함수로 이벤트 처리 최적화