react-virtualized 스크롤 복원

전제

WindowScroller를 쓰면 가상 목록의 스크롤이 window 스크롤과 동기화된다. 목록 위에 다른 영역이 있으면 window scrollTop과 가상 목록의 scrollTop이 달라진다. 가상 목록은 뷰포트를 벗어나는 순간부터 스크롤 값을 갖기 때문이다. 라이브러리가 제공하는 scrollToIndex, scrollToRow, scrollToPosition은 WindowScroller와 함께 쓰면 제대로 동작하지 않아 다른 방식으로 복원했다.

복원에 필요한 두 값

1. 떠날 때의 가상 목록 scrollTop. window 값이 아니라 라이브러리 구현체의 값이 필요해서 WindowScroller에 ref를 걸어 읽는다.
2. 각 행의 측정 높이. 높이가 동적이면 렌더링 시작 때의 defaultHeight와 측정 뒤 높이가 달라서, 마지막으로 측정한 높이를 저장했다가 복원 시점에 CellMeasurerCache에 주입한다.

const cache = new CellMeasurerCache({ fixedWidth: true, defaultHeight: height })
if (initRowsHeight) {
  (cache as any)._rowHeightCache = { ...initRowsHeight }
  (cache as any)._cellHeightCache = { ...initRowsHeight }
}

const rowsCacheHeight = useRef<Map<string, number>>(new Map())
const saveRowsHeight = ({ index }: ListRowProps) => {
  rowsCacheHeight.current.set(`${index}-0`, memoizedCache.rowHeight({ index }))
}

저장은 Zustand 스토어에 한다. Next.js에서는 routeChangeStart 이벤트에서, React 단독 환경에서는 페이지 컴포넌트 unmount에서 저장한다. 위치와 높이를 돌려주는 getPosition, getRowHeight는 변수가 아니라 함수로 둔다. 변수면 첫 렌더링 값에 묶인다.

useEffect(() => {
  const saveCacheDataHandler = () => {
    const position = getPosition()
    cacheSlice.saveCacheData({
      scrolly: position.windowScroll,
      rowsHeight: getRowHeight(),
      virtualScrollY: position.virtualScroll,
    })
  }
  events.on('routeChangeStart', saveCacheDataHandler)
  return () => events.off('routeChangeStart', saveCacheDataHandler)
}, [events])

복원할 때 지킬 세 가지

1. CellMeasurerCache를 초기화하지 않는다. 초기화되면 모든 행이 기본 높이로 돌아갔다가 다시 측정되며 레이아웃이 줄었다 늘어난다. 꼭 필요할 때만 cacheFlag 의존성으로 새 캐시를 만든다.
2. 스토어에 저장한 데이터와 React Query 캐시 데이터가 같아진 뒤에 렌더링한다. 그 전에 그리면 엉뚱한 위치에 도착한다. infinite query는 캐시에서 돌려줄 때 로드했던 페이지를 한 번에 주므로 배열 길이로 비교한다.
3. React Query가 새 데이터를 받아 왔으면 복원하지 않는다. gcTime이 지나 캐시가 비면 스토어 값만 남아 영원히 렌더링되지 않을 수 있다. isLoading이 켜지면 만료 플래그를 세운다.

useEffect(() => { if (isLoading) setIsExpired(true) }, [isLoading])

{fetchedData?.length > (!isExpired ? storeData.length : 0) && (
  <VirtualScrollContainer {...props}>{(props) => <Children {...props} />}</VirtualScrollContainer>
)}

복원 값은 <List scrollTop={initScrollY || scrollTop} />처럼 주입한다. List의 scrollTop은 window와 연결돼 있어 주입한 값을 지우지 않으면 스크롤해도 계속 그 위치로 돌아간다. 그래서 initScrollY는 useState로 두고 도착한 뒤 undefined로 되돌린다.

트러블슈팅

useEffect(() => {
  let ms = 0
  const intervalId = setInterval(() => {
    if (ms <= INTERVAL_TIME.TWO_HUNDRED_MS) {
      checkAndSetScrollTop()
      ms += INTERVAL_TIME.FIFTY_MS
    } else {
      clearInterval(intervalId)
      setForceScrollTop(undefined)
    }
  }, INTERVAL_TIME.FIFTY_MS)
  return () => clearInterval(intervalId)
}, [])

const checkAndSetScrollTop = () => {
  if (virtualScrollTop) {
    const diff = Math.floor(scrollRef.current - virtualScrollTop)
    if (Math.abs(diff) > THRESHOLD.SCROLL) setForceScrollTop(virtualScrollTop)
  } else if (scrollTop) {
    setTimeout(() => window.scrollTo({ top: Math.floor(scrollTop) }), 10)
  }
}

인터벌 복원은 정답이 아니라 우회책이다. 모든 경우를 덮지는 못하지만 대체 방안이 없을 때 참고할 만하다. 이슈 10은 QA 티켓 QAH-906, QAH-747로 들어왔다.

구현체 인터페이스

useVirtualScrollPropsGetter 훅이 scrollTop과 행 높이, 저장 콜백, WindowScroller ref 핸들러를 돌려주고, VirtualScrollContainer가 그 값을 InfiniteLoader, WindowScroller, AutoSizer, List에 주입한다.

interface VirtualScrollContainerProps<T> extends Pick<InfiniteLoaderProps, 'loadMoreRows'> {
  data: unknown[]
  cache: CellMeasurerCache
  children: (props: VirtualScrollChildProps<T>) => ReactNode
  windowScroll?: boolean
  onWindowScrollMounted?: (ref: WindowScroller | null) => void
  onRowRendered?: (props: ListRowProps) => void
  scrollY?: number | null
  virtualScrollY?: number | null
  scrollDiffThreshold?: number
}

<VirtualScrollContainer
  data={rows}
  cache={cache}
  loadMoreRows={() => fetchNextPage()}
  onWindowScrollMounted={updateWindowScrollerHandler}
  onRowRendered={saveRowsHeightHandler}
  scrolly={!expiredRef.current ? loaded?.scrollY : 0}
  virtualScrollY={!expiredRef.current ? loaded?.virtualScrollY : 0}
  scrollDiffThreshold={loaded?.scrollDiffThreshold ? ref?.offsetHeight : 0}
>
  {(props) => <ChildComp {...props} />}
</VirtualScrollContainer>

참고

• 오늘의집 블로그, 무한 스크롤 개발기
• LogRocket, Implementing scroll restoration in ecommerce React apps
• web.dev, 대규모 목록 가상화