React 가상화 리스트로 대량 렌더링 최적화

개요

웹 애플리케이션에서 수천 개 이상의 항목을 렌더링하면 성능 저하가 흔히 발생한다. 이 문제를 해결하는 대표적인 방법이 리스트 가상화이다. 가상화는 실제로 보이는 요소만 DOM에 유지해 렌더링 비용을 크게 줄인다. 이 글은 기본 개념부터 react-window 예제까지 차근히 설명해 대량 목록 렌더링 최적화에 도움을 준다.

왜 가상화가 필요한가

문제의 본질

DOM에 많은 노드를 한꺼번에 올리면 초기 렌더링과 재렌더링 비용이 급격히 증가한다. 브라우저 레이아웃과 페인트 시간이 늘어나며 사용자 경험이 저하된다. 특히 모바일 환경에서는 더 민감하다.

가상화가 주는 이점

• 초기 렌더링 속도 단축
• 메모리 사용량 감소
• 스크롤 성능 개선
• 재렌더링 범위 축소

핵심 개념

뷰포트와 오프셋

뷰포트는 현재 보이는 영역을 의미한다. 가상화는 뷰포트에 들어오는 항목만 렌더링한다. 오프셋은 스크롤 위치를 뜻하며, 이를 기반으로 어떤 항목을 보여줄지 계산한다.

아이템 크기와 버퍼

고정 높이 항목은 계산이 쉽다. 동적 높이 항목은 더 복잡하다. 보통 소량의 버퍼 항목을 추가로 렌더링해 스크롤 시 깜빡임을 줄인다.

react-window로 시작하기

설치와 기본 사용법

react-window는 가볍고 성능 좋은 라이브러리다. 설치 후 FixedSizeList 또는 VariableSizeList를 사용해 쉽게 가상화 구현이 가능하다. 아래는 기본 예제다.

import React from 'react'
import { FixedSizeList as List } from 'react-window'

const Row = ({ index, style }) => (
  <div style={style}>Item {index}</div>
)

export default function Example() {
  return (
    <List
      height={500}
      itemCount={10000}
      itemSize={35}
      width={'100%'}
    >
      {Row}
    </List>
  )
}

위 예제는 고정 높이(itemSize)를 가진 리스트다. itemCount에 따라 스크롤 바가 동작하며, 실제로 렌더되는 DOM은 보이는 영역과 버퍼에 해당하는 일부뿐이다. 이 패턴은 react virtualized 사용법과 유사하지만 더 경량이다.

성능 고려사항

키(key) 관리

각 아이템에 안정적인 key를 부여하면 불필요한 재렌더링을 방지할 수 있다. 인덱스만 key로 사용하는 것은 아이템 삽입·삭제가 빈번한 경우 권장되지 않는다.

아이템 크기 처리

고정 높이는 가장 효율적이다. 동적 높이는 VariableSizeList를 사용하되, 측정 비용이 추가된다. 필요 시 ResizeObserver로 높이를 추적해 캐시에 저장하면 성능을 유지할 수 있다.

상태와 렌더러 분리

아이템 내부에 불필요한 상태 로직을 넣지 않는다. 렌더러는 순수 함수 형태로 만들고, 복잡한 상태는 상위에서 관리해 전달하는 편이 좋다.

무한 스크롤과 가상화 결합

데이터 페칭 패턴

가상화와 무한 스크롤을 함께 쓰려면 경계 근처에서 데이터를 미리 불러와야 한다. 보통 화면 끝에서 일정 오프셋 이하로 내려가면 다음 페이지를 요청한다. 로딩 상태는 플레이스홀더를 렌더링해 사용자 경험을 유지한다.

const Item = ({ index, style, data }) => {
  const item = data.items[index]
  return (
    <div style={style}>
      {item ? item.title : 'Loading...'}
    </div>
  )
}

// List 컴포넌트에 data로 items와 로딩 핸들러를 전달

실무 팁

• 첫 단계는 고정 높이로 테스트해 본다.
• 프로파일링 도구로 렌더링 비용을 측정한다.
• 이미지나 미디어는 lazy-loading을 적용한다.
• 복잡한 항목은 메모이제이션으로 렌더 비용을 낮춘다.

결론

대량 목록 렌더링 최적화는 구조적 접근이 중요하다. react-window 예제처럼 단순한 가상화부터 시작해, 필요할 때 VariableSizeList나 무한 로딩을 결합하면 효과적이다. react virtualized 사용법과 차이를 이해하면 적절한 도구를 선택할 수 있다. 결국 핵심은 보이는 것만 렌더링하는 원칙과 재렌더링 범위 최소화다.