가상스크롤의 원리 알고 계신가요?
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *대상자_정보**
- 대상: 프론트엔드 개발자, 대규모 데이터 렌더링을 처리해야 하는 개발자
- 난이도: 중급 이상 (라이브러리 사용 경험 필수)
핵심 요약
- 가상스크롤은 "화면에 보이는 것만 렌더링"하는 기술로, 대규모 데이터 렌더링 시 성능 최적화의 핵심
- 2024년 CSS
content-visibility: auto
와contain-intrinsic-size
를 통해 간단한 구현 가능 - 기존 라이브러리(React Virtualized 등)는 복잡한 요구사항 처리에 강점, CSS는 유지보수성과 간편성 제공
섹션별 세부 요약
###1. 가상스크롤이 필요한 상황
- 대용량 데이터 렌더링: 관리자 대시보드, 로그 테이블 등에서 수천 개 항목 렌더링 시 브라우저 성능 저하
- 무한 스크롤: 검색 결과, 쇼핑몰 제품 목록 등에서 스크롤 시 메모리 사용량 급증
- 모바일 환경: 메모리/프로세서 성능 제한으로 인한 스크롤 레이턴시 증가
###2. 가상스크롤의 핵심 원리
- 렌더링 영역 분할:
- [위쪽 안보이는 영역] → padding-top
으로 공간 확보
- [현재 보이는 영역] → 실제 DOM에 렌더링
- [아래쪽 안보이는 영역] → padding-bottom
으로 공간 확보
- 스크롤바 UX 관리:
- 전체 높이 = 아이템 개수 × 아이템 높이
- 스크롤 위치 = (현재 첫 번째 아이템 인덱스 / 전체 아이템 수) × 100%
###3. 버퍼 영역 활용
- 스ム스 스크롤: 보이는 영역보다 더 많은 아이템을 미리 렌더링(예: 5개 보이면 9개 렌더링)
- 레이아웃 변화 없음: 아이템 교체 시 DOM 인덱스 변경 없이
padding
조정으로 자연스러운 스크롤 제공
###4. 2024년 CSS 기반 솔루션
content-visibility: auto
: 화면에 보이지 않으면 렌더링 지연contain-intrinsic-size: auto 200px
: 미리 계산된 아이템 높이로 스크롤바 정확성 유지- 구현 예시:
```css
.list-item {
content-visibility: auto;
contain-intrinsic-size: auto 200px;
}
```
- 장점:
- 구현 복잡도: 2줄 CSS로 완료
- 유지보수: 브라우저 자동 최적화
- 접근성: 스크린 리더와 호환
###5. 기존 라이브러리 vs CSS 솔루션
- 라이브러리(React Virtualized 등):
- 강점: 동적 높이, 버퍼링, 복잡한 스크롤 동작 제어
- 약점: 추가 의존성, 코드베이스 변경 필요
- CSS 솔루션:
- 강점: 기존 DOM 구조 그대로 유지, 유지보수성 향상
- 약점: 복잡한 UI/동적 높이 처리 제한
결론
- 간단한 성능 개선:
content-visibility: auto
와contain-intrinsic-size
로 기존 HTML 구조 변경 없이 적용 - 복잡한 요구사항: React Virtualized 등 라이브러리 사용
- 핵심 팁: "필요한 것만 렌더링"이라는 철학을 기반으로 상황에 맞는 기술 선택 필수