회사 프로젝트 중 랭킹 페이지를 개편하다 문제를 만났습니다. 순위표는 채널에 따라 수백 명, 많게는 약 1,000명가량의 행을 한 번에 그립니다. 화면에는 십수 개만 보이지만, 브라우저는 스크롤을 시작하기도 전에 보이지 않는 행까지 전부의 위치, 크기와 픽셀을 계산합니다. 첫 렌더에서 이미 비용을 다 치르는 셈입니다.
가장 먼저 떠오른 답은 무한 스크롤이었습니다. 약 1,000행을 한 번에 내려주지 말고 필요한 만큼만 잘라서 받는 방식이죠. 그런데 두 가지가 걸렸습니다. 하나는, 무한 스크롤은 데이터를 나눠 받는 기법이지 그리는 비용을 직접 줄이는 기법이 아니라는 점입니다. 스크롤해서 행이 쌓이면 결국 다시 전부 그리게 되니까요. 다른 하나는 현실적인 문제로, 이 방식은 백엔드에 페이지네이션 API가 필요한데 그 우선순위가 낮아 언제 반영될지 미지수였습니다. 그래서 우선 프론트엔드 단에서, 그리는 비용 자체를 줄일 방법부터 찾아보기로 했습니다.
그렇게 그리는 양을 줄이는 프론트 기법을 조사했습니다. 프론트엔드 스터디에서 발견한 List Virtualization이 유력해 보였고, 마침 프로젝트에 이미 react-window가 설치되어 있었습니다. 그런데 가상화는 이 페이지에 생각보다 좋은 선택이 아니었습니다.