Angular를 사용한 사실상 무한 스크롤

무한 스크롤이 등장한 지 꽤 되었습니다. 기본 아이디어: 스크롤할 때 새로운 콘텐츠가 맨 아래에 로드되어 끝없는 스크롤이 생성됩니다. 이를 구현하는 것은 간단하지만 신중한 계획이 없으면 성능이 저하됩니다. 몇 번의 콘텐츠 다시 가져오기 후에는 수백 개의 DOM 요소가 있을 수 있지만 그 중 상당수는 보이지 않습니다. 다행히도 이를 완화할 수 있는 패턴이 있으며 Angular를 사용하여 패턴을 살펴보겠습니다.

우리가 피하고 싶은 것은 바로 이것이다.

가상 스크롤

가상 스크롤은 언제든지 큰 목록의 하위 집합만 렌더링합니다. 이는 무한 스크롤과 다릅니다. 모든 것을 한 번에 렌더링하는 것이 비효율적인 대규모 데이터 세트에 이상적입니다. 보이는(및 거의 보이는) 항목만 렌더링됩니다. 사용자가 스크롤하면 항목이 동적으로 교체됩니다. 이는 DOM 요소를 크게 줄여 성능을 향상시킵니다.

가상 스크롤은 뷰포트 높이와 일치하는 컨테이너를 생성하여 작동합니다. CSS를 통해 관리되는 특정 스크롤 깊이에서 표시되는 항목(버퍼 포함)만 이 컨테이너 내에서 렌더링됩니다. 스크롤하면 컨테이너가 업데이트되어 새 항목이 표시되고 보기에서 제거되고 스크롤 깊이가 조정됩니다. 이를 무한 스크롤과 결합하면 성능 저하 없이 사실상 무한 목록이 생성됩니다.

아래 예에서는 수천 개의 항목 목록을 표시하지만 한 번에 최대 8개를 렌더링합니다. 스크롤하면 CSS 스크롤 높이가 조정되어 훨씬 긴 목록처럼 보입니다.

실제 사례

Reddit의 페이지 매김 API에서 미디어를 가져와 가상 스크롤 목록에 표시하는 Angular 애플리케이션을 구축해 보겠습니다. 하위 레딧 선택을 위한 검색창과 필터가 포함됩니다. 아래로 스크롤하면 더 많은 콘텐츠가 로드됩니다. 우리의 주요 요구 사항:

1. RxJS Observable과 비동기 파이프를 기반으로 합니다.
2. 하위 레딧이나 필터 변경 시 콘텐츠를 재설정하지만 새 콘텐츠를 추가할 때는 재설정하지 않습니다.
3. 중복 API 호출 없이 원활한 위/아래 스크롤을 위해 이전 콘텐츠를 메모리에 저장합니다.

@angular/cdk 패키지(Virtual Scroller 구성요소 포함)를 사용하겠습니다. npm i @angular/cdk으로 설치하세요.

이 예시에서는 Angular를 사용하지만 비슷한 패턴을 React, Vue 또는 바닐라 JavaScript에 적용할 수 있습니다. 기본 원칙을 설명하는 기본 데모는 여기에서 볼 수 있습니다.

서비스 설정

먼저 Angular의 HttpClient 및 RxJS Observable을 사용하여 Reddit API에서 콘텐츠를 가져오는 서비스를 만들어 하위 레딧 이름과 필터를 관리합니다. (간결함을 위해 일부 코드는 생략되었습니다. 전체 구현은 여기에 있습니다).

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

콘텐츠 가져오기 방법은 데이터 요청 중에 특정 속성을 추적합니다. 마지막 항목 다음에 새 콘텐츠를 가져오도록 page 속성이 쿼리 문자열에 추가됩니다. 또한 게시물 힌트가 없는 NSFW 콘텐츠와 항목을 필터링합니다. 이렇게 하면 예상되는 콘텐츠만 표시됩니다.

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

query$ 관찰 가능(이전에 생략됨)은 콘텐츠를 가져오기 전에 서로 다른 관찰 가능 스트림을 병합합니다. scan 연산자는 이전 및 현재 스트림 결과를 결합하여 여러 페이지에 걸쳐 대규모 데이터 배열을 구축합니다.

이를 통해 광범위한 스크롤이 가능합니다. 하위 레딧 이름이나 필터 변경만 전체 다시 가져오기를 트리거합니다. nextPage의 속성인 query$은 현재 세트의 마지막 항목 ID를 저장하며, 가상 스크롤러의 하단에 가까워졌을 때 다음에 가져올 페이지를 결정하는 데 사용됩니다.

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

RxJS의 힘은 데이터 스트림을 결합하고 조작하는 데 있습니다. 이를 통해 비즈니스 로직이 구성 요소에 도달하기 전에 처리하여 구성 요소를 더 깔끔하고 재사용 가능하게 유지할 수 있습니다.

구성요소 설정

다음으로 Angular의 CdkVirtualScrollViewport을 사용하여 콘텐츠를 표시하는 컴포넌트를 설정했습니다. 메소드는 뷰포트 하단 근처의 스크롤을 처리하고 subRedditPage$ Observable

을 통해 다음 페이지를 가져옵니다.

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

템플릿은 비동기 파이프를 사용하여 query$을 구독합니다. 참고: 가상 스크롤러는 가변 높이 콘텐츠로 인해 더욱 복잡해집니다. 성능을 위해서는 일관된 항목 높이를 권장합니다.

<code class="language-html">// ... (Omitted for brevity) ...</code>

onScroll 메소드는 사용자가 하단에 가까워지면 더 많은 콘텐츠를 가져옵니다. nextPage ID(query$에서)를 사용하여 subRedditPage$로 내보내고 다음 API 호출을 트리거하고 query$을 통해 목록을 업데이트합니다.

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

검색창과 탭 컨트롤도 통합되었습니다(아래의 간단한 예).

<code class="language-typescript">// ... (Omitted for brevity) ...</code>

결론

이렇게 하면 사실상 무한한 스크롤러가 생성됩니다. 여기에서 테스트해 볼 수 있습니다. Reddit의 API에는 속도 제한이 있습니다. 테스트 중에 충돌할 수도 있습니다. 추가 기능을 포함한 자세한 내용은 여기에서 GitHub 저장소를 참조하세요.

위 내용은 Angular를 사용한 사실상 무한 스크롤의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!