무한스크롤 성능 측정/개선하기(2)

아 예쁘다

 

useEffect 의존성 해결로 fetch 반복 문제 해결
컨테이너 높이 확실하게 잡아서 스크롤 시 fetch 되도록 해결

목차

1. 기존 InfiniteScroll 상태

2. 문제1) useEffect 내부에서의 반복 호출 문제

3. 문제2) DOM 누적 문제

4. 수정 후 성능

5. 배포 후 테스트

6. 정리

 

---

1. 현재 보이는 문제와 기존 InfiniteScroll 상태

1. 현재 보이는 문제

두가지 상황이 반복되어서 나타나고 있었다.

1. 처음 페이지 로드 시 Fetch가 연속해서 실행되어 DOM에 모든 카드가 렌더링됨

2. 1을 해결해보면 Scroll을 바닥까지 내려도 fetch가 아예 되지 않음

 

2. 기존 InfiniteScroll 상태

수정을 하고 하다가 기존 상태는 아래와 같다.

시간이 좀 부족한 관계로 일단 기존 코드를 냅다 둬보겠다.

'use client';

import { type Link } from '@/types/link';
import { Virtualizer, useVirtualizer } from '@tanstack/react-virtual';
import clsx from 'clsx';
import React, { useCallback, useEffect, useMemo, useRef } from 'react';

import Spinner from '../Spinner/Spinner';
import { styles } from './InfiniteScroll.style';

const { root: rootCls, statusRow, loader: loaderCls, end, error } = styles();

const CARD_ASPECT = 58 / 47;
const ROW_GAP = 16;
const FALLBACK_ROW_HEIGHT = 232;
const RESIZE_DEBOUNCE_MS = 150;
const LOAD_AHEAD_PX = 300;

function useColumns() {
  const [columns, setColumns] = React.useState(() =>
    typeof window !== 'undefined' && window.innerWidth >= 768 ? 4 : 2
  );

  useEffect(() => {
    let timer: ReturnType<typeof setTimeout>;
    const handleResize = () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        setColumns(window.innerWidth >= 768 ? 4 : 2);
      }, 100);
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
      clearTimeout(timer);
    };
  }, []);

  return columns;
}

export type InfiniteScrollProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
  items: Link[];
  renderItem: (item: Link, index: number) => React.ReactNode;
  onLoadMore: () => void | Promise<void>;
  hasMore: boolean;
  isLoading?: boolean;
  errorMessage?: string | null;
  loader?: React.ReactNode;
  endMessage?: React.ReactNode;
  errorSlot?: (msg: string) => React.ReactNode;
};

const InfiniteScroll = React.forwardRef<HTMLDivElement, InfiniteScrollProps>(
  function InfiniteScroll(
    {
      items,
      renderItem,
      className,
      onLoadMore,
      hasMore,
      isLoading = false,
      errorMessage = null,
      loader,
      endMessage,
      errorSlot,
      ...rest
    }: InfiniteScrollProps,
    ref: React.ForwardedRef<HTMLDivElement>
  ) {
    const innerRef = useRef<HTMLDivElement | null>(null);
    const loadingRef = useRef<boolean>(false);
    const containerWidthRef = useRef(0);
    const columns = useColumns();

    const setRef = (el: HTMLDivElement | null) => {
      innerRef.current = el;
      if (typeof ref === 'function') ref(el);
      else if (ref) ref.current = el;
    };

    useEffect(() => {
      loadingRef.current = isLoading;
    }, [isLoading]);

    // canLoadRef: render-time snapshot read synchronously inside event handlers
    const canLoadRef = useRef(false);
    canLoadRef.current = hasMore && !isLoading && !errorMessage;

    const rows = useMemo(() => {
      const result: Link[][] = [];
      for (let i = 0; i < items.length; i += columns) {
        result.push(items.slice(i, i + columns));
      }
      return result;
    }, [items, columns]);

    const estimateSize = useCallback(() => {
      const width = containerWidthRef.current;
      if (!width) return FALLBACK_ROW_HEIGHT;
      const cardWidth = (width - ROW_GAP * (columns - 1)) / columns;
      return cardWidth * CARD_ASPECT + ROW_GAP;
    }, [columns]);

    const observeElementRect = useCallback(
      (
        instance: Virtualizer<HTMLDivElement, Element>,
        cb: (rect: { width: number; height: number }) => void
      ) => {
        const el = instance.scrollElement;
        if (!el) return;

        const notify = () => {
          containerWidthRef.current = el.clientWidth;
          cb({ width: el.clientWidth, height: el.clientHeight });
        };

        notify();

        let timer: ReturnType<typeof setTimeout>;
        const ro = new ResizeObserver(() => {
          clearTimeout(timer);
          timer = setTimeout(notify, RESIZE_DEBOUNCE_MS);
        });
        ro.observe(el);

        return () => {
          ro.disconnect();
          clearTimeout(timer);
        };
      },
      []
    );

    const virtualizer = useVirtualizer({
      count: rows.length,
      getScrollElement: () => innerRef.current,
      estimateSize,
      overscan: 3,
      observeElementRect,
    });

    useEffect(() => {
      virtualizer.measure();
    }, [columns, virtualizer]);

    useEffect(() => {
      const el = innerRef.current;
      if (!el) return;

      const handleScroll = () => {
        if (loadingRef.current || !canLoadRef.current) return;
        const { scrollTop, scrollHeight, clientHeight } = el;
        if (scrollTop + clientHeight >= scrollHeight - LOAD_AHEAD_PX) {
          loadingRef.current = true;
          onLoadMore();
        }
      };

      el.addEventListener('scroll', handleScroll, { passive: true });
      return () => el.removeEventListener('scroll', handleScroll);
    }, [onLoadMore]);

    useEffect(() => {
      const el = innerRef.current;
      if (!el || !canLoadRef.current || loadingRef.current) return;
      if (el.scrollHeight <= el.clientHeight) {
        loadingRef.current = true;
        onLoadMore();
      }
    }, [items.length, onLoadMore]);

    return (
      <div ref={setRef} className={clsx(className, rootCls())} {...rest}>
        <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
          {virtualizer.getVirtualItems().map(virtualRow => {
            const row = rows[virtualRow.index];
            if (!row) return null;
            return (
              <div
                key={virtualRow.key}
                data-index={virtualRow.index}
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: '100%',
                  transform: `translateY(${virtualRow.start}px)`,
                }}
              >
                <div className="grid grid-cols-2 gap-4 pb-4 md:grid-cols-4">
                  {row.map((item, i) => (
                    <React.Fragment key={virtualRow.index * columns + i}>
                      {renderItem(item, virtualRow.index * columns + i)}
                    </React.Fragment>
                  ))}
                </div>
              </div>
            );
          })}
        </div>

        {errorMessage && (
          <div className={clsx(statusRow(), error())} role="status" aria-live="polite">
            {errorSlot ? errorSlot(errorMessage) : <span>{errorMessage}</span>}
          </div>
        )}

        {isLoading && (
          <div className={clsx(statusRow(), loaderCls())} role="status" aria-live="polite">
            {loader ?? <Spinner />}
          </div>
        )}

        {!hasMore && !isLoading && !errorMessage && (
          <div className={clsx(statusRow(), end())} role="status" aria-live="polite">
            {endMessage ?? <span>마지막입니다</span>}
          </div>
        )}
      </div>
    );
  }
);

export default React.memo(InfiniteScroll);

 

---

2. 문제1) useEffect 내부에서의 반복 호출 문제

기존 구현은 스크롤 이벤트 기반 + 상태 조합 방식이었다.

useEffect(() => {
  const handleScroll = () => {
    if (loadingRef.current || !canLoadRef.current) return;

    if (scrollTop + clientHeight >= scrollHeight - LOAD_AHEAD_PX) {
      loadingRef.current = true;
      onLoadMore();
    }
  };
}, [onLoadMore]);

스크롤 이벤트는 수 ms 단위로 매우 빈번하게 발생한다. 조건을 만족하는 순간 연속 호출 가능성이 있는 것이다.

이것을 loadingRef만으로 막는 것은 불완전하다.

loadingRef는 외부 state로, 반영 타이밍이 지연될 수 있으며, 이 지연되는 시간 사이에 race condition이 발생할 수 있다.

→ API 중복 호출

→ 페이지 꼬임

→ 불필요한 렌더링 증가

의 문제가 발생하게 된다.

 

 

1. isFetching 상태 관리하기

isFetching의 현재 상태를 리액트의 렌더링 주기와 무관하게 즉각적으로 알 수 있도록 useRef를 사용한 isFetchingRef를 도입

const isFetchingRef = useRef(false);

React State가 아닌 즉시 반영되는 mutable 값을 주어 반영 타이밍 지연을 막는다.

 

바닥 감지 또한 기존 물리적 위치인 scrollTop 기반에서 virtual row를 활용한 마지막 2줄 근처로 더 안정적이도록 한다.

const lastItem = virtualRows[virtualRows.length - 1];
const isNearBottom = lastItem.index >= rows.length - 2;

 

2. onLoadMore 호출 조건 엄격하게 제한

호출 조건을 엄격하게 제한해서 가드를 한다.

if (
  isNearBottom &&
  hasMore &&
  !isLoading &&
  !errorMessage &&
  !isFetchingRef.current
)

• hasMore: 더 불러올 데이터가 있는가
• isLoading: 외부에서 loading 상태이지는 않은가
• errorMessage: 에러 상태는 아닌가
• isFetchingRef: 내부 동기상태는 아닌가

또한 Promise 기반 완전 차단 코드도 추가한다.

const result = safeLoadMore();

if (result instanceof Promise) {
  result.finally(() => {
    isFetchingRef.current = false;
  });
}

finally에 false를 넣어, 요청이 끝날 때까지는 절대 재호출이 불가능하도록 하였다.

 

AbortController로 이전 요청 취소도 가능하도록 했다.

if (controllerRef.current) {
  controllerRef.current.abort();
}

빠른 스크롤 시 이전 요청을 무효화 하여 최신 요청만 유지하도록 한다.

---

3. 문제2) DOM 누적 문제

useVirtualizer를 사용하고 있음에도 DOM에 데이터가 쌓인다는 것은

컨테이너의 높이가 제대로 잡히지 않아서 브라우저 기본 스크롤을 사용하고 있거나, 가상화 레이아웃이 정상작동 하지 않는 것, 실제 높이를 제대로 계산하지 못하는 가능성이 있다.

 

기존 코드에서는 estimateSize()를 사용해서 컨테이너 width 기반 계산을 하는데,

이게 실제 DOM과 mismatch 발생할 가능성이 있다.

 

estimateSize()는 카드 비율이 일정하고 콘텐츠 높이가 고정되어있음을 가정한 추정값인데,

실제 DOM은 이미지 로딩 전/후 높이 변화, 폰트 렌더링 이후의 변화, 텍스트 길이에 따른 줄바꿈 등의 변화가 있기 때문이다.

 

또한 estimate에서는 padding, border, gap 처리 방식 등의 요소를 포함하지 않아 실제 DOM이 더 커질 수 있다.

 

measureElement로 rowVirtualizer의 높이를 측정하면

실제 DOM height을 직접 측정하여 virtualizer에 반영해서 비용은 조금 생기나 정확도가 올라간다.

 

고정 높이에 콘텐츠 변화가 없고, 이미지가 없거나 aspect ratio가 완전히 고정되면 estimate로도 충분하나,

카드 내부 콘텐츠가 동적이고 이미지가 포함되고, 반응형 grid에 줄바꿈이 있는 요소를 그릴 때는 mismatch가 발생하므로

measureElement를 사용하면 정확도가 훨씬 올라간다.

 

 

1. measureElement 적용

ref={rowVirtualizer.measureElement}

measureElement로 각 row의 실제 DOM 높이를 측정하여 virtualizer가 정확한 layout을 계산하도록 했다.

 

2. strict layout 조건 충족

<div
  className="... overflow-y-auto contain-strict"
>
...
<div style={{ position: 'relative' }}>
  <div style={{ position: 'absolute', transform: translateY(...) }}>

 

가상화 필수 조건 3개가 있다.

• 부모 → scroll container
• 내부 → relative
• row → absolute positioning

 

3. totalSize 기반 스크롤 영역 생성

height: `${rowVirtualizer.getTotalSize()}px`

 

• 전체 높이를 가짜로 만들어서
• 스크롤은 유지하고
• 실제 DOM은 최소화

 

4. 반응형 Grid + Row 단위 가상화

for (let i = 0; i < items.length; i += currentColumns)

• 카드 단위가 아니라 row 단위 virtualizing으로 성능상 더 효율적인 방식 사용

 5. ResizeObserver 기반 컬럼 관리

const observer = new ResizeObserver(...)

기존 window resize였던 것을 컨테이너 기준 반응형으로 수정해서 더 정확한 레이아웃을 주도록 함

 

 

추가로 InfiniteScroll을 감싸는 AllPage 부모에서 h-screen을 명시해서 스크롤 영역을 명확하게 지정

 

 

 

 

 

 

---

4. 수정 후 성능

이제 수정을 마쳤으니 다시 성능 콘솔을 보자.

한 번 fetch한 데이터는 캐시로 저장해서 다시 스크롤을 올릴 때는 fetch가 발생하지 않는다.

	API Total Time	Scroll Fetch Latency	Render Time
first load	133.5 ms 199.29999999701977 ms	209.30000000447035 ms	235.20000000298023 ms
1	92.29999999701977 ms	107.29999999701977 ms	107.59999999403954 ms
2	65.29999999701977 ms	123.30000000447035 ms	123.70000000298023 ms
3	119.39999999850988 ms	121.10000000149012 ms	169 ms
4	116.19999999552965 ms	130.79999999701977 ms	131 ms
5	46.79999999701977 ms	61.80000000447035 ms	62 ms
6	110.70000000298023 ms	125.69999999552965 ms	126 ms
7	110.89999999850988 ms	112.69999999552965 ms	128.69999999552965 ms
8	70.39999999850988 ms	116.20000000298023 ms	116.5 ms

 

가상화 이전 수치

 

가상화 이전에는 모든 수치가 점점 증가했다면, 이제는 처음부터 끝까지 일정하게 보인다.

 

또한 element 탭에서 확인하면 화면에 보이는 열과 그 위아래 3줄 정도만 추가로 DOM에 존재하는 것을 확인할 수 있다.

아 너무 아름다움...🥹

 

---

5. 배포 후 테스트

 

before/after

리팩토링 이전과는 확연히 달라진 모습이다.

• CPU 사용량 그래프
  • 빨간 막대(50ms초과)가 보이는 부분이 훨씬 적어졌다.
  • 노란 막대(JS 실행)도 거의 없어졌다.
• Network 섹션
  • 네트워크 요청 간격이 일정해졌다.
    화면 버벅임이 줄어 스크롤하는 즉시 데이터를 불러오고 다음 요청을 보낼 수 있게 되었기 때문이다.
• Frames 섹선
  • 이전에는 뒤로갈수록 프레임 렌더링 시간이 길어져서 마지막에는 7,534.1ms가 나왔었으나,
    이제는 화면이 멈추지 않아 마지막 프레임 렌더링 시간도 13.2ms로 정상 범위 내로 줄었다.

• Animations 섹션
  
  • 리팩토링 전보다 애니메이션이 발생했다는 보라색 그래프가 빼곡하게 보이는데, 이 페이지에서의 애니메이션은
    로딩 스피너이다. 즉 로딩이 즉각즉각 일어나고 데이터 fetch가 빠르게 발생하여 다음 로딩도 바로 진행되었다는 뜻
• Main Thread 섹션
  • 빨간 세모(Long Task)가 거의 사라졌으며, 노란색 그래프(JS Task)가 아예 사라졌다. 보라색 그래프 내용물도 바뀌었다.
  • 보라(anonymous, processAnnotations): DOM 노드 대량 생성/삭제 비용이다. (가상화로 해결)
    스크롤마다 수백 개 아이템의 마운트/언마운트가 발생하며 익명함수 호출과 내부 처리가 쌓인 모습이다.
  • 노랑(Timer fired, Run microtasks, Function call)
    Timer fired: virtual 적용으로 내부적으로 스크롤을 감지해서 필요할 때만 virtualRows 업데이트하도록 함
    Run microtasks: onLoadMore 호출 가드로 불필요한 호출 문제 해결
    Function call: onLoadMore 호출 가드로 불필요한 호출 문제 해결

 

현재 남아있는 background-color, opacity 블록은 CSS 애니메이션 처리 블록이다.

이것도 main thread가 아닌 compositor thread로 넘겨서 처리할 수 있다고 하는데 이부분은 추가로 알아봐야겠다.

 

---

6. 정리

문제 상황

- 무한스크롤 가상화 및 최적화 미적용으로 인한 성능 저하 문제

- DOM에 노드가 점점 쌓여서 성능 저하율이 점점 높아짐

 

문제 파악

- 배포본 개발자 도구의 performance탭으로 페이지 녹화 후 그래프 체크

    → CPU 그래프 체크: 잦은 Long Task 및 JS 실행 여부 파악

    → Network 섹션: 점점 길어지는 요청 간격

    → Frames 섹션: 점점 길어지는 렌더링 시간(ms)

    → Animations 섹션: 점점 간격이 벌어지는 Animation(페이지에서의 애니메이션은 로딩 중 보여주는 Spinner정도)

    → Main Thread 섹션: Long Task 및 발생하는 JS Task 확인 (Timer fired, Run microtasks, Runction call)

- 로컬에서 performance.now()로 요청 시작 시간 및 응답 받은 직후 시각을 ms 단위로 체크하여 레이턴시 시간 기록

 

해결1: 가상화 적용

- tanstack/react-virtual 사용해서 가상화 적용하여 viewport에 보이는 row만 DOM에 렌더링

- grid 형태가 깨지는 문제가 생겨, 정해진 열의 rows 단위로 height 지정 및 가상화 적용

 

해결2: 최적화

- useMemo로 items/columns가 바뀔 때만 row 배열 재계산

 

- useCallback으로 렌더마다 함수 재생성 방지

 

- isFetchingRef로 진행 중인 요청이 있을 경우 추가 fetch 차단하여 중복 fetch 방지

 

- resize 이벤트 대신 ResizeObserver로 container width 변화만 감지

- setCurrentColumns의 이전값을 비교하여 실제로 columns이 바뀔 때만 state 업데이트

 

 

 

 

 

 

 

 

 

 

참고

참고자료링크