[javascript] 프로미스를 이용한 페이징 및 레이지 로딩 처리

07 Dec 2023

javascript

이번 포스트에서는 JavaScript의 프로미스를 이용하여 페이징과 레이지 로딩을 처리하는 방법에 대해 알아보겠습니다. 페이징은 데이터를 일부씩 나누어 보여주는 것이며, 레이지 로딩은 필요한 데이터만을 요청하여 동적으로 로딩하는 방식입니다.

페이징 처리

페이징 처리를 위해 아래와 같이 getData 함수를 정의합니다. 이 함수는 pageIndex와 pageSize를 매개변수로 받아 해당 페이지의 데이터를 반환합니다.

function getData(pageIndex, pageSize) {
  return new Promise((resolve, reject) => {
    // 데이터를 비동기적으로 가져온다고 가정
    setTimeout(() => {
      const data = []; // 페이징된 데이터를 담을 배열

      // 페이지의 첫 번째 인덱스 계산
      const startIndex = (pageIndex - 1) * pageSize;

      for (let i = startIndex; i < startIndex + pageSize; i++) {
        // 데이터를 가져와서 배열에 추가
        data.push({
          id: i,
          name: `Data ${i}`
        });
      }

      resolve(data); // 데이터를 프로미스로 반환
    }, 1000); // 1초 후에 실행
  });
}

getData 함수는 프로미스를 반환하므로, then 메서드를 사용하여 데이터를 처리할 수 있습니다. 예를 들어, 아래와 같이 첫 번째 페이지의 데이터를 출력하는 경우입니다.

getData(1, 10).then((data) => {
  console.log(data);
});

레이지 로딩 처리

레이지 로딩을 위해 getLazyData 함수를 아래와 같이 정의합니다. 이 함수는 페이지 번호와 데이터의 개수를 매개변수로 받아 해당 페이지의 데이터를 비동기적으로 로딩합니다.

function getLazyData(pageIndex, pageSize) {
  return new Promise((resolve, reject) => {
    // 데이터를 비동기적으로 가져온다고 가정
    setTimeout(() => {
      const data = []; // 로딩된 데이터를 담을 배열

      // 페이지의 첫 번째 인덱스 계산
      const startIndex = (pageIndex - 1) * pageSize;

      // 필요한 데이터만 가져옴
      for (let i = startIndex; i < startIndex + pageSize; i++) {
        // 데이터를 가져와서 배열에 추가
        data.push({
          id: i,
          name: `Data ${i}`
        });
      }

      resolve(data); // 데이터를 프로미스로 반환
    }, 1000); // 1초 후에 실행
  });
}

getLazyData 함수를 사용하여 필요한 페이지의 데이터를 비동기적으로 로딩하면 됩니다. 예를 들어, 아래와 같이 첫 번째 페이지의 데이터를 출력하는 경우입니다.

getLazyData(1, 10).then((data) => {
  console.log(data);
});

결론

프로미스를 이용하여 페이징과 레이지 로딩을 처리하는 방법에 대해 알아보았습니다. 이를 활용하면 사용자에게 필요한 데이터를 효율적으로 제공하고, 불필요한 데이터를 로딩하지 않아 성능을 향상시킬 수 있습니다.

페이징 처리

레이지 로딩 처리

결론

참고 자료