Large List Rendering Issue

문제가 생기는 이유

리스트 항목이 수백 개를 넘기기 시작하면 화면 렌더링이 눈에 띄게 느려질 수 있다. 스크롤이 끊기거나 입력 반응이 늦어지는 현상은 대부분 한 번에 너무 많은 DOM을 그리기 때문에 발생한다.

문제 원인은 보통 다음 중 하나다.

• 화면에 보이지 않는 항목까지 전부 렌더링한다.
• 각 아이템이 무거운 컴포넌트 구조를 가진다.
• 상태 변경 시 리스트 전체가 다시 렌더링된다.
• 이미지, 측정 로직, 계산 로직이 항목별로 반복된다.

먼저 확인할 것

• 실제 DOM 노드 수
• 리스트 재렌더링 횟수
• 이미지나 차트 같은 무거운 자식 컴포넌트 존재 여부
• 스크롤 시 layout thrashing 발생 여부

리스트 성능 문제는 “데이터가 많다”보다 화면에 얼마나 많은 비용을 동시에 올리는가의 문제다.

대표적인 해결 방법

1. Virtualization

가장 효과적인 방법은 화면에 보이는 구간만 렌더링하는 것이다.

• react-window
• react-virtualized
• 가상 스크롤 직접 구현

이 방식은 DOM 개수를 크게 줄여준다.

2. 항목 구조 단순화

리스트 아이템 하나가 카드, 이미지, 배지, 버튼, 계산 로직까지 모두 가지면 항목 수가 늘어날수록 비용이 급격히 커진다. 아이템 UI를 단순화하거나 무거운 요소를 지연 로딩하는 편이 낫다.

3. 불필요한 재렌더링 차단

정렬, 필터, 선택 상태 변경이 전체 리스트를 다시 그리게 만들면 스크롤 성능이 쉽게 무너진다. 상태 범위를 줄이고, 아이템 단위로 변경이 전파되지 않게 설계해야 한다.

실무에서 자주 놓치는 부분

• 검색어 입력 때마다 전체 필터링 + 전체 렌더링
• hover 상태 같은 사소한 상태가 전체 리스트에 전파됨
• 각 행에서 날짜 포맷팅, 계산, 네트워크 호출을 직접 수행함

리스트는 항목이 많아질수록 작은 비효율이 크게 증폭된다.

정리

대규모 리스트 렌더링 문제는 브라우저가 느린 것이 아니라 화면에 동시에 올린 작업량이 너무 큰 것이다. 가장 먼저 DOM 개수를 줄이고, 그 다음 재렌더링 범위와 항목별 비용을 줄이는 방향으로 접근하는 것이 좋다.