프론트엔드
목록 가상화의 마법 “우리 DOM이 달라졌어요”
두줄요약
무한 스크롤 피드에서 DOM 증가로 인한 성능 저하를 해결하기 위해 가상화를 도입했습니다.\n동적 높이와 스크롤 복원을 고려해 react-virtuoso를 선택하고 직접 복원 로직도 구현했습니다.
핵심 내용
- 대규모 이미지·동영상 피드를 가진 커뮤니티 목록에서 무한 스크롤로 DOM이 계속 늘어나며 렌더링 저하와 메모리 문제 발생
- 가상화로 화면에 보이는 항목만 렌더링해 성능과 사용자 경험을 개선하는 접근 소개
- 라이브러리 비교 결과 동적 높이, window 스크롤, 스크롤 복원, 유지보수, 번들 사이즈 기준으로 react-virtuoso 선택
- totalCount를 쓰기 어려운 구조라 sessionStorage와 scrollToIndex를 활용해 스크롤 복원을 직접 구현
적용해볼 점
- 동적 높이와 무한 스크롤이 함께 있는 목록에서는 가상화 도입 검토 필요
- 내장 복원 옵션이 맞지 않으면 라우트 이벤트와 지연 복원 방식으로 대체 가능