Ember.js로 무한 스크롤 기능을 어떻게 구현하나요?

브라우저에서 많은 양의 데이터를 효율적으로 처리하기 위해 무한 스크롤(infinite scroll) 기능은 많이 사용됩니다. 이 기능을 Ember.js로 구현하는 방법을 알아보겠습니다.

1. 스크롤 이벤트 감지

우선, 스크롤 이벤트를 감지하여 데이터를 로드하기 위한 작업을 시작해야 합니다. 이를 위해 Ember의 `` 훅을 사용하여 스크롤 이벤트를 등록합니다.

import Component from '@ember/component';
import { action } from '@ember/object';
import $ from 'jquery';

export default class InfiniteScrollComponent extends Component {
  @action
  didInsert() {
    $(window).on('scroll', this.handleScroll);
  }

  willDestroy() {
    $(window).off('scroll', this.handleScroll);
  }

  @action
  handleScroll() {
    // 스크롤 위치 계산 및 데이터 로드 작업 수행
  }
}

2. 스크롤 위치 계산

스크롤 이벤트 발생 시, 현재 스크롤 위치를 계산하여 언제 데이터를 로드해야 하는지를 판단해야 합니다. 스크롤 위치 계산에는 window.pageYOffset을 사용할 수 있습니다.

@action
handleScroll() {
  const scrollPosition = window.pageYOffset;
  const windowHeight = window.innerHeight;
  const documentHeight = $(document).height();

  if (scrollPosition + windowHeight >= documentHeight) {
    // 데이터 로드 작업 수행
  }
}

3. 데이터 로드 작업 수행

스크롤 위치가 로딩 임계점에 도달하면 실제 데이터를 로드하는 작업을 수행해야 합니다. 먼저, Ember의 store 서비스를 활용하여 데이터를 가져옵니다.

import { inject as service } from '@ember/service';

export default class InfiniteScrollComponent extends Component {
  @service store;

  @action
  handleScroll() {
    // ...

    if (scrollPosition + windowHeight >= documentHeight) {
      // 데이터 로드 작업 수행
      this.loadMoreData();
    }
  }

  async loadMoreData() {
    const data = await this.store.query('model', { page: nextPageNumber });

    // 데이터 처리 및 렌더링 작업 수행
  }
}

위 예제에서 model은 Ember 데이터 모델의 이름이며, query 메서드를 사용하여 페이지 번호에 따라 데이터를 로드합니다.

4. 데이터 처리 및 렌더링

마지막으로, 로드한 데이터를 적절하게 처리하고 UI에 렌더링해야 합니다. 이 단계에서 추가 데이터를 기존 데이터와 결합하거나, Ember 컴포넌트를 사용하여 새로운 아이템을 동적으로 추가할 수 있습니다.

import { tracked } from '@glimmer/tracking';

export default class InfiniteScrollComponent extends Component {
  @tracked items = [];

  async loadMoreData() {
    // ...

    const newData = data.map(item => {
      // 데이터 처리 로직 수행
    });

    // 기존 데이터와 새로운 데이터를 결합
    this.items = [...this.items, ...newData];
  }
}

위 예제에서 @tracked를 사용하여 items 배열을 추적하고, loadMoreData 메서드에서 새로운 데이터를 기존 데이터와 합칩니다. 이후 템플릿에서 `` 블록을 사용하여 아이템을 렌더링할 수 있습니다.

이제 이 무한 스크롤 컴포넌트를 사용하여 브라우저에서 많은 양의 데이터를 효율적으로 처리할 수 있습니다.

참고 자료: