느린 UI의 원인? 리스트 가상화로 프론트엔드 병목해결
안녕하세요, 프론트엔드 개발을 좋아하고 성능 최적화에 집착하는ㅎㅎ 긍정맨입니다.
여러분은 SPA를 개발하면서 리스트 렌더링 이슈로 머리가 아팠던 경험이 있으신가요?
오늘은 그 해결책이 될 수 있는 리스트 가상화 기술에 대해 공유해보려 합니다.!
리스트 렌더링 문제, 왜 발생할까?
사용자 목록, 댓글 리스트, 상품 목록처럼 스크롤이 길어지는 UI에서 모든 데이터를 한 번에 렌더링하면 렌더링 지연, 메모리 누수 등 성능 이슈가 발생합니다.
특히 모바일 환경에서는 렉(Lag)이 체감될 정도로 심해지는데요.
리스트 가상화(Virtualization)란 무엇인가?
리스트 가상화는 화면에 보이는 데이터만 렌더링하고 보이지 않는 요소는 DOM에서 제거해 렌더링 성능을 극대화하는 기법입니다.
가장 많이 쓰이는 라이브러리는 아래와 같습니다.
• react-window
• react-virtualized
• RecycleListView
React에서 리스트 가상화 구현 방법
React 환경을 기준으로 간단한 예제를 소개합니다.
브런치에는 코드를 넣을 수 있는 박스가 없어서 ㅠㅠ 이미지로 대신할게요!
이처럼 항목 수가 많더라도 브라우저 메모리 사용량을 줄이고, 초기 렌더링 속도를 개선할 수 있습니다!
가상화 적용 전후 성능 비교하기!
• 적용 전:
◦ 1,000개 DOM 렌더링 시 TTI(Time To Interactive) 2.5초
◦ CPU 사용량 급증
• 적용 후:
◦ 렌더링 시간 1.1초로 감소
◦ 스크롤 부드러움 향상
최적화를 위한 팁과 주의할 점
• 항목 높이를 고정해야 성능을 극대화할 수 있습니다.
→ 가변 높이 항목은 react-virtualized의 CellMeasurer를 사용하세요.
• 항상 key 값은 고유하게 설정해야 합니다.
• lazy loading, infinite scroll과 조합하면 UX가 좋아집니다.
성능 향상의 진짜 해법은 무엇일까?
리스트 가상화는 프론트엔드 성능 최적화의 핵심 기술인데요!
단순한 렌더링 성능 개선을 넘어, 사용자의 만족도와 이탈률에도 직접적인 영향을 미칠 수 있는 요소입니다.
프론트엔드 성능 최적화, 리스트 가상화, SPA 고도화까지 고민하고 계시다면 저는 똑똑한개발자를 추천하는데요. 똑똑한개발자는 실력 있는 개발자를 추천하는 믿을 수 있는 파트너로 함께 하실 수 있어요!
오늘도 글 읽어주셔서 감사합니다~
