React Infinite Scroll (무한 스크롤) 구현하기

🍀 Infinite Scroll ?

infinite scroll은 브라우저의 하단으로 스크롤을 하면
사용자가 어떠한 액션(클릭)을 하지 않아도 알아서 이미지가 나오도록 처리하는 것 입니다.  

 

이러한 것이 가능하게 하려면 

• 스크롤이 하단부에 왔음을 감지할 수 있어야하고,
• 감지 했을 때 다음 page의 사진을 불러오는 작업(pagination)을 수행하는 함수를 실행해야 합니다. 

크게 두가지 방식이 있습니다. 

• (덜 효율적인) 기존 방식
  • 웹 브라우저에서 제공하는 api에는 스크롤(event)을 할 때 어떤 함수를 실행되게하는 addEventListener와 어떠한 element의 content가 수직으로 얼마나 스크롤되었는지를 픽셀 단위의 수로 나타내주는 Element.scrollTop 프로퍼티가 있습니다. 
  • 그렇다면 스크롤이 일어날 때 실행되는 함수 안에 조건문을 넣어서 스크롤의 위치가 특정한 곳에 있다면 다음 page의 사진을 불러오도록 하는 것이죠. 
  • 예시는 아래와 같습니다.

    document.addEventListener("mousewheel", ()=> console.log(`scrollTop: ${document.children[0].scrollTop}`))​
    // console.log()대신에 스크롤이 어디까지 왔는지 확인하도록하고 if문으로 조건을 지정해 주어서 스크롤이 어느 위치에 도달하면
    // 다음 페이지의 사진을 불러오도록 하는 http 요청을 보내면 되는 것이죠.

• 권장하는 방식
  • 스크롤의 끝에 있는 특정 element를 주시하고 있다가 이 element의 지정된 만큼이 화면에 나타나면(view port에 들어왔을 때) 특정 함수를 실행하게 하는 Intersection Observer API의 Thresholds를 사용하는 방식입니다. 아래 사진을 보면 대놓고 해당 api가 infinite scroll에 필요함을 적어놓은 것을 알 수도 있죠. 저는 이번 포스팅에서 이 방식으로 리액트에서 infinite scroll을 구현해 볼까 합니다. 
  

🍀 리액트에서 어떻게 구현할까 ?

권장하는 방식을 설명하며 특정 element를 주시해야한다고 했습니다.
우선 모든 태그 정보를 불러와서 가장 마지막에 있는 태그를 감시하게 하도록 해봅시다. 

노란 배경에 있는 나무 의자를 감시하게 만들거고,
이 나무의자가 화면에 보이는 순간 다음 페이지의 사진을 요청하는 http 요청을 보낼 겁니다. 

• 해당 element의 정보를 불러와야하는데 자바스크립트에서는 getElementById를 통해서 특정 id가 있는 element를 불러올 수 있지만 리액트에서는 useRef를 이용하는 것을 권장합니다.

  import React, { useContexet ,useRef } from 'react';
  import { ImageContext } from '../context/ImageContext';
  
  function ImageList() {
  	const elementRef = useRef(null);
      const {images} = useContext(ImageContext);
      
      const imgList = 
      	images.map((image, index) => ( 
                <Link
                    key={image.key}
                    to={`/images/${image._id}`}
                    ref={index + 1 === myImages.length ? elementRef : undefined}
                >
                    <img
                        src={`http://localhost:5000/uploads/${image.key}`}
                        alt=""
                    />
                </Link>
            ))
  	return(
      	<div className="imageList">{imgList}</div>
      )
  }​

   위 코드를 보시면 ref={index + 1 === images.length ? elementRef : undefined}라는 속성 설정을 통해 마지막 사진을 감싸는 Link(a) 태그에만 elementRef를 지정하는 것을 알 수 있습니다. 
•  
• 자 그럼 어떻게 elementRef를 감시하면서 특정 함수가 실행되게 할 수 있을까요?

  import React, { useContexet, useRef, useEffect } from 'react';
  import { ImageContext } from '../context/ImageContext';
  
  function ImageList() {
  	const elementRef = useRef(null);
      const {images, loadMoreImages} = useContext(ImageContext);
      
      useEffect(() => {
          if (!elementRef.current) return; //에러처리
          const observer = new IntersectionObserver(([entry]) => {
              if (entry.isIntersecting) loadMoreImages();
          });
          observer.observe(elementRef.current);
          return () => observer.disconnect();
      }, [loadMoreImages]); // loadMoreImages는 페이지네이션을 통해 다음 페이지의 사진을 요청하는 함수 입니다.
      
      const imgList = 
      	images.map((image, index) => ( 
                <Link
                    key={image.key}
                    to={`/images/${image._id}`}
                    ref={index + 1 === myImages.length ? elementRef : undefined}
                >
                    <img
                        src={`http://localhost:5000/uploads/${image.key}`}
                        alt=""
                    />
                </Link>
            ))
  	return(
      	<div className="imageList">{imgList}</div>
      )
  }​​

  • useEffect를 통해 loadMoreImages 함수가 바뀔때 다음 페이지의 사진을 요청하는 함수인 loadMoreImages가 호출되고, 호출한 후에 감시하는 element를 없애도록 하였습니다.  
  • const observer = new IntersectionObserver(([entry]) => {
    • new IntersectionObserver는 콜백과 옵션을 인자로 받습니다.
    • 콜백 전달인자에는 구조분해 할당으로 entry를 뽑아서 넣어주었고
    • new IntersectionObserver의 콜백함수의 전달인자로 여러개의 entry들을 넣어주면 여러 element를 주시할 수 있지만
      저는 마지막 사진을 감싸는 Link(a)태그를 주시할 것이기에 하나만 가져왔습니다.
    • (참고로 옵션은 설정하지 않았기에 thresholds는 0으로 되어있습니다.)
  • if (entry.isIntersecting) loadMoreImages();
    • entry.isIntersecting은 해당 요소가 화면에 보이자마자 true가 되고 다음 페이지의 사진을 요청하는 loadMoreImages 함수를 실행해주는 것이죠.
    • 즉 해당 요소가 화면에 보이자마자 new IntersectionObserver의 콜백함수가 실행되는 것입니다.
  • observer.observe(elementRef.current);
    • 주시할 element를 넣어주는 코드입니다.
  • return () => observer.disconnect();
    • 기존에 있는 elementRef를 없애주는 역할입니다.

이렇게 해서 권장되는 방법으로 구현하는 무한 스크롤에 대해서 알아보았습니다.    

 

참고로 마지막 사진에 가기 전 조금 더 일찍 사진을 불러오고 싶다면...

    const imgList = 
    	images.map((image, index) => ( 
              <Link
                  key={image.key}
                  to={`/images/${image._id}`}
                  ref={index + 1 === myImages.length ? elementRef : undefined}
              >
                  <img
                      src={`http://localhost:5000/uploads/${image.key}`}
                      alt=""
                  />
              </Link>
          ))

위 코드에서 index + 1을 index + 3, index + 5, index + 10과 같이 올려주면 조금더 빠른 로딩을 통해 좋은 사용자 경험을 줄 수도 있답니다!