채팅 로그 뷰어 같은 걸 만드는데 데이터가 한 번에 5천 개, 많으면 만 개 넘게 옵니다. 그걸 그냥 map 돌려서 다 렌더링했더니 처음 그릴 때 몇 초 멈추고, 스크롤할 때도 뚝뚝 끊겨요. 항목마다 이미지에 버튼도 몇 개 있어서 DOM 노드가 어마어마하게 많아지긴 하더라고요.
대충 지금 이런 식이에요.
{items.map((it) => (
<Row key={it.id} data={it} />
))}
검색해보니까 "가상 스크롤" 또는 "윈도잉"을 쓰라는 말이 많던데, 이게 정확히 뭘 하는 건지 감이 안 와요. 화면엔 어차피 스무 개 정도밖에 안 보이는데 나머지 수천 개를 어떻게 처리한다는 건지 원리가 궁금합니다.
제가 이해한 건 안 보이는 건 DOM에서 빼버린다는 건데, 그러면 스크롤바 길이는 어떻게 유지하고 중간으로 스크롤 확 내렸을 때 위치는 어떻게 맞추나요? 안 보이던 게 갑자기 튀어나오면 깜빡이거나 빈 칸 보이지 않나요?
그리고 항목마다 높이가 제각각(어떤 건 텍스트 한 줄, 어떤 건 이미지 포함)인 경우도 가상 스크롤이 되나요? react-window 같은 라이브러리 이름은 봤는데 그냥 갖다 쓰기 전에 원리를 좀 알고 싶어요. 무한 스크롤이랑은 또 다른 개념인 거죠?