이번 글에서는 JavaScript 라이브러리인 MobX를 사용하여 무한 스크롤 처리를 구현하는 방법에 대해 알아보겠습니다.

무한 스크롤은 웹 애플리케이션에서 사용자가 스크롤을 내릴 때 추가적인 데이터를 동적으로 로드하는 기능을 말합니다. MobX는 상태 관리 라이브러리로써 이러한 동적인 데이터 로딩을 쉽게 구현할 수 있도록 도와줍니다.

MobX란?

MobX는 React와 함께 사용하기 쉬운 상태 관리 라이브러리입니다. 이 라이브러리를 사용하면 애플리케이션의 상태를 관리하고 상태가 변경될 때 자동으로 UI를 업데이트할 수 있습니다. MobX가 제공하는 주요 개념은 Observable, Observer, Action입니다.

• Observable: 관찰 가능한 상태를 정의하는 객체입니다. 이 객체가 변경되면 자동으로 Observer에게 알립니다.
• Observer: Observable을 관찰하고 변경사항을 감지하여 UI를 업데이트하는 역할을 합니다.
• Action: Observable의 상태를 변경하는 메서드입니다.

무한 스크롤 처리 구현해보기

MobX를 사용하여 무한 스크롤을 처리하는 간단한 예제를 살펴보겠습니다.

import { makeObservable, observable, action } from "mobx";

class ScrollStore {
  @observable items = [];
  @observable loading = false;
  
  constructor() {
    makeObservable(this);
  }
  
  @action
  fetchItems() {
    this.loading = true;
    
    // 데이터를 비동기적으로 로드합니다.
    fetchData()
      .then((data) => {
        this.items.push(...data);
        this.loading = false;
      })
      .catch((error) => {
        console.error("Error fetching items:", error);
        this.loading = false;
      });
  }
}

const scrollStore = new ScrollStore();

// 스크롤 이벤트가 발생했을 때 무한 스크롤 처리를 호출합니다.
window.addEventListener("scroll", () => {
  if (document.documentElement.scrollHeight - window.innerHeight <= window.scrollY) {
    scrollStore.fetchItems();
  }
});

위 코드에서 ScrollStore라는 MobX 스토어 클래스를 정의합니다. 스토어는 items와 loading이라는 observable 상태를 가지고 있습니다. 이 상태는 로딩 중인지 아닌지를 나타내는 변수와 스크롤로 로드된 데이터를 저장하는 배열입니다.

fetchItems 메서드는 데이터를 비동기적으로 로드하고 스토어의 상태를 업데이트합니다. 스크롤 이벤트가 발생했을 때 무한 스크롤 처리를 호출하여 fetchItems를 실행합니다.

위 코드를 실행하면 사용자가 스크롤을 내릴 때마다 fetchItems가 호출되며 추가 데이터가 동적으로 로드되고 스크롤 화면에 표시되는 것을 확인할 수 있습니다.

마무리

MobX는 무한 스크롤과 같은 동적인 데이터 로딩을 쉽게 구현할 수 있도록 도와주는 상태 관리 라이브러리입니다. 이번 글에서는 MobX를 사용하여 간단한 무한 스크롤 예제를 구현하는 방법에 대해 알아보았습니다. MobX의 세부 사항과 사용 방법에 대해서는 공식 문서를 참조하시기 바랍니다.

참고 문서: MobX 공식 문서