가상 스크롤을 구현하여 대규모 목록의 응답성을 높입니다.
스크롤 목록은 즐겨찾는 소셜 미디어 사이트에서 무한 스크롤 피드를 탐색하거나 엔터프라이즈 대시보드를 탐색하는 등 오늘날 가장 일반적인 UI 패턴 중 하나입니다. 스크롤 목록이 매우 길어지면(수백, 수천 또는 수십만 개의 항목) 애플리케이션 성능이 저하될 수 있습니다.
애플리케이션이 모든 데이터를 미리 로드하고 렌더링해야 하므로 대규모 목록은 로드하는 데 시간이 오래 걸릴 수 있습니다. 또한 목록의 각 항목에 리치 데이터 , 미디어, 기능이 있을 수 있으므로 렌더링하고 탐색하는 데 시간이 오래 걸릴 수 있습니다.
사용자가 페이지를 로드하거나 스크롤할 때 문제가 발생하여 불만을 느끼고 페이지를 이탈할 수 있습니다.
구성요소 개발자 키트가 포함된 Angular의 가상 스크롤
가상 스크롤은 이러한 확장 문제를 해결하는 데 사용되는 기본 기술입니다. 가상 스크롤은 적절한 크기의 스크롤바를 제공하고 애플리케이션이 전체 목록을 메모리에 보관하거나 페이지에 렌더링하지 않고도 목록을 탐색할 수 있는 기능을 제공하여 매우 큰 목록이라는 인상을 줍니다.
Angular에서 가상 스크롤은 구성요소 개발자 키트 (CDK)에서 제공합니다. 목록을 반복하는 방식을 수정하고 몇 가지 추가 구성 매개변수를 제공하면 CDK의 가상 스크롤이 목록의 가상 렌더링을 자동으로 관리하여 페이지 성능과 응답성을 개선합니다.
전체 목록을 한 번에 렌더링하는 대신 화면에 맞는 항목의 하위 집합 (작은 버퍼 포함)만 렌더링됩니다. 사용자가 탐색하면 항목의 새 하위 집합이 계산되고 렌더링되며 원하는 경우 기존 DOM을 재사용합니다.
이 게시물의 나머지 부분에서는 기본 가상 스크롤을 설정하는 방법을 안내합니다. 이 샘플 앱에서 작동하는 전체 예시를 확인할 수 있습니다.
가상 스크롤 설정
먼저 즐겨찾는 패키지 관리자를 사용하여 @angular/cdk를 설치했는지 확인합니다. npm을 사용하여 설치하려면 터미널에서 다음 명령어를 실행합니다.
npm install --save @angular/cdk
앱에 ScrollingModule 추가
CDK가 설치된 상태에서 가상 스크롤을 처리하는 ScrollingModule을 @angular/cdk/scrolling 패키지에서 가져옵니다. 그런 다음 모듈의 가져오기 배열에 추가합니다.
import {ScrollingModule} from '@angular/cdk/scrolling';
...
imports: [
ScrollingModule
...
]
...
뷰포트 만들기
패키지가 작동하는 방식을 확인하려면 0~99,999의 숫자 목록이 있는 구성요소를 만들어 보세요.
@Component({
template: `<div *ngFor="let item of list">{{item}}</div>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
브라우저가 앱을 렌더링할 때 100,000개의 개별 <div>
요소를 렌더링해야 합니다. 이는 기본 텍스트 노드에는 적합할 수 있지만 반복되는 템플릿의 복잡성은 잘 확장되지 않으며 이벤트 리스너가 크게 곱해집니다.
가상 스크롤을 추가하고 이러한 문제를 방지하려면 목록을 <cdk-virtual-scroll-viewport> 요소로 래핑하여 뷰포트
를 만들어야 합니다.
@Component({
template: `<cdk-virtual-scroll-viewport>
<div *ngFor="let item of list">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
ScrollingModule은 목록의 하위 집합을 동적으로 렌더링하므로 표준 CSS로 뷰포트의 높이를 지정해야 합니다. itemSize를 지정하여 뷰포트에 콘텐츠에 관한 힌트를 제공해야 합니다. 이 모듈은 이 정보를 사용하여 특정 시점에 DOM에 유지할 항목 수와 적절한 크기의 스크롤바를 렌더링하는 방법을 결정합니다.
@Component({
template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
<div *ngFor="let item of list">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
마지막으로 *ngFor를 *cdkVirtualFor로 변환합니다.
@Component({
template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
<div *cdkVirtualFor="let item of list">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
뷰포트는 전체 목록을 반복하는 대신 사용자를 위한 목록의 올바른 하위 집합을 동적으로 식별하고 반복합니다. 이제 사용자가 페이지를 로드하면 CDK가 화면에 맞는 목록의 하위 집합 (약간의 버퍼 포함)을 렌더링하고 뷰포트의 스크롤 이벤트가 목록의 적절한 하위 집합을 로드하고 렌더링합니다.
추가 정보
CDK의 가상 스크롤 기능은 이 기본 예시보다 훨씬 더 발전했습니다.
샘플 앱에서 전체 목록은 메모리에 있었지만 더 복잡한 애플리케이션의 경우 목록을 주문형으로 가져올 수 있습니다. CDK 문서에서 Scrolling
에 관해 읽어
ScrollingModule 및 cdkVirtualOf 디렉티브의 다른 기능에 관해 자세히 알아볼 수 있습니다.