학습목표

• Virtual Scroll을 이용해서 Infinite Scroll 쌈박하게 하기

Infinite Scroll이 뭘까

• 스크롤이 진행되면서 데이터 호출이 이뤄지고 무한하게 리스트를 보는게 가능해지는 기능
• 지속되는 리스트 노출 경험이나 페이지네이션이 불편한 환경에서 유용

Intersection Observer를 이용한 일반적인 방법

• 참고

  Intersection Observer - 요소의 가시성 관찰

import React, { useEffect, useRef, useState } from 'react'
import axios from '../utils/fakeAxios';

const InfiniteScroll = props => {
    const ref = useRef(null);
    const [data, setData] = useState([]);

    const callApi = async () => {
        const listData = await axios.get();
        setData(listData);
    }

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if(entry.isIntersecting){
                callApi();
            }
        })
    })

    useEffect(() => {
        callApi(); 
        observer.observe(ref.current);
    }, [])

    return (
        <div className="infiniteScroll">
            {data.map(({id, name}) => (
                <div className="infiniteScroll-item" key={id}>
                    <span>{name}</span>
                </div>
            ))}
            <div ref={ref}></div>
        </div>
    )
}

export default InfiniteScroll

위 방식의 문제점

• 스크롤이 진행될수록 DOM 이 많아지고 점차 느려진다
• 정말 무한하게 호출해서 리스트 아이템이 몇만개가 넘어간다면 오류가 날수 있다

Virtual Scroll을 이용하자

Virtual Scroll이 뭘까

• 보이는 DOM 데이터만 바뀌면서 스크롤이 진행 되는 방식
  • 100만개의 리스트 아이템을 그려도 정해놓은 DOM 개수로 충분히 렌더를 한다