Angular Large List 최적화 (Angular CDK)

안녕하세요. 꼬동입니다.

 

오늘은 브라우저 최적화 관련 글을 읽어보다가 발견한 영문 포스팅이 있는데, 좋은 글을 본거 같아 이를 번역해보려고 합니다.

 

web.dev/virtualize-lists-with-angular-cdk/

Virtualize large lists with the Angular CDK

 

물론, 제가 직접 Angular로 프로젝트를 한 적이 없어서 해당 글에 대해서 겉햝기 밖엔 안되지만 !

 

여러분들은 똑똑하시기 때문에 아마 잘 이해하실거라 믿습니다.

---

리스트 스크롤은 자주 보이는 UI 패턴입니다. 소셜 미디어, 기업 사이트 등 어디에서든 사용을 합니다.

 

허나, 데이터/미디어 리스트가 크다면 느려질 수 있는데 이를 한꺼번에 렌더(Render)를 한다는 건 부하가 크기 때문이죠. 만약 이런 사이트를 쓴다면.... 당연히 그 사이트를 좋아하지 않겠죠.

 

---

앵귤러에선 이러한 문제를 해결하기 위해 Virtual Scrolling 기능이 있습니다. 정확히는 Component Dev Kit 안에요.

 

Virtual Scrolling은 이러한 문제를 해결해줄 수 있는 중요한 테크닉입니다. 전체 목록을 전부 가져오지 않고 메모리를 아끼고 스크롤 바에 따른 목록들만 보여주는 기능을 지니고 있죠.

 

앵귤러에서는 CDK(Component Dev Kit)을 통해서 Virtual Scrolling을 제공합니다. 이를 통해서 자동으로 저희 리스트들을 Virtaul Rendering을 해서 페이지 성능을 향상 시켜주죠.

 

저희 스크린에 맞는 부분에만 렌더를 제공해서 유저가 새로운 아이템을 원하면, 이를 계산하고 렌더하며, DOM을 재사용합니다.

 

실제로 사용을 해봅시다.

// Shell
npm install --save @angular/cdk

// app.module.ts

import { ScrollingModule } from '@angular/cdk/scrolling';


...
imports: [
	...
    ScrollingModule
    ...
]
...

여기까지 하면 준비 끝 !

---

컴포넌트를 만들어 봅시다.

// Shell
ng generate component scroll

// scroll.component.ts
...
export class ScrollComponent implements OnInit {
	
    // 콜백함수의 두 번째 매개변수가 index입니다.
    list = Array.from({ length: 100000 }, (v, i) => i);
    
    constructor() { }
    
    ngOnInit(): void {
    }
    
}

<!--scroll.component.html-->
<div *ngFor="let item of list">
	{{ item }}
</div>

숫자가 많네요.

후.. 저거 10만으로 해서 방금 크롬 튕겼는데, 다행히 글이 삭제 되진 않았네요.

 

이처럼 text만 찍는 거도 엄청난 부하가 걸리는데, 만약 여기에 이벤트가 달리거나 데이터, 미디어가 달린다면 얼마나 더 오래 걸리게 될까요.

 

그래서 저는 Virtual Scrolling을 쓰려합니다.

<!--scroll.component.html-->
<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
  <div *cdkVirtualFor="let item of list">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

제가 한건 아래와 같습니다.

 

• cdk-virtual-scroll-viewport 태그를 생성하고, 리스트를 이로 감싸기
• itemSize와 style을 작성해주기
  • 모듈의 경우 이 정보를 이용하여, DOM에 아이템을 유지합니다.
• *ngFor를 *cdkVirtualFor로 바꾸기

이렇게 하면 리스트의 전체가 생성되지 않고, 정확하게 개발자가 입력한 정보만큼 데이터가 나오며, 렌더를 적절하게 조절해줍니다.

 

보면 div 태그 text content가 233부터 시작합니다. 0부터가 아니라

위의 사진을 보면 0부터가 아닌 233부터 시작하죠? 모듈이 계산하고 부분적으로 렌더링을 해주기 때문입니다.

 

이로서 안정적으로 유저가 사용할 수 있도록 만들어 주는 거죠.

 

해당 글의 저자는 이렇다고 합니다.

 

유저가 페이지를 로드하면, CDK는 스크린에 딱 맞게 렌더를 해준다고 합니다. 그 후 스크롤 이벤트가 뷰포트에서 발생하면 적절하게 렌더를 해주는 거죠.

 

이로서 편하게 사용할 수 있는 리스트 스크롤링을 만들 수 있었습니다.

 

참 쉽죠 ?

---

위에까지가 번역한 글입니다.

 

이제부턴 제 생각을 좀 곁들여서 쓸게요.

 

굉장히 좋고 간편하게 스크롤링 문제를 해결할 수 있어서 좋은거 같네요.

 

근데 실제로 실무에서 쓸지는 잘 모르겠습니다.

 

실무에서는 워낙 서버와의 통신이 잦고, 원하는 UI에 맞춰야하니까요. 이럴 땐 보통 스켈레톤 템플릿을 보여주고 유저의 경험을 향상시킨다고 들었는데, CDK를 통해서도 할 수 있는지는.. 실무를 가서 봐야 알 것 같습니다.

 

그래도 간편하게 대용량 데이터 리스트 스크롤링을 간단하게 해결할 수 있으니, 좋은 모듈인거 같네요.

 

모듈에 대해 더 알고 싶다면, 아래를 참고해주세요.

 

material.angular.io/cdk/scrolling/overview

Angular Material

---

이상 Angular Large List 최적화 (Angular CDK)였습니다. ^_^