초급 웹 개발자가 자주 겪는 200가지 문제(feat. RealGrid): 4. 데이터 페이징 처리

데이터 페이징은 많은 데이터를 한 화면에 표시하지 않고 페이지 단위로 나누어 보여주는 기능으로, 사용자에게 더 편리한 탐색 환경을 제공하고, 대량의 데이터를 로드할 때 발생할 수 있는 성능 문제를 줄이는 데 유용합니다. RealGrid에서는 데이터를 효율적으로 페이징하는 기능을 제공하며, 특히 대용량 데이터를 다루는 실무 상황에서 중요하게 사용됩니다.

주요 내용

1. 기본 페이징 설정
   • RealGrid의 기본 페이징 기능을 활성화하여 데이터 페이지당 보여줄 행(row) 수를 설정할 수 있습니다.
   • 예시: gridView.setPaging(true, 50);
     위 코드를 통해 페이지 기능을 활성화하고, 한 페이지에 50개 행을 표시할 수 있습니다.
2. 페이징 UI 설정
   • 기본 페이징 설정 외에도 페이지 이동 버튼과 같은 UI를 사용자 인터페이스에 추가하여 사용자가 페이지를 쉽게 탐색할 수 있도록 합니다.
   • 실무에서 UI를 통해 사용자 친화적인 페이징 환경을 구축하는 것이 중요합니다.
3. 서버 측 페이징 구현
   • 대량의 데이터는 클라이언트 측에서 모든 데이터를 로드하여 페이징하는 것보다 서버 측에서 페이지 단위로 데이터를 로드하는 방식이 효과적입니다.
   • 서버 측 페이징은 클라이언트에 데이터가 과도하게 쌓이는 것을 방지하며 성능을 크게 향상시킵니다.
   • 예제: 특정 페이지를 로드할 때 서버에서 해당 페이지의 데이터를 요청하는 코드 예시는 다음과 같습니다.

   • function loadPage(pageNumber) {
         const apiUrl = `/api/data?page=${pageNumber}`;
         fetch(apiUrl)
             .then(response => response.json())
             .then(data => gridView.setRows(data))
             .catch(error => console.error('Error:', error));
     }

   • 참고 사항: 서버 측 페이징을 사용할 때는 데이터 API의 성능과 연결 속도 등을 고려하여 페이징 처리를 최적화하는 것이 중요합니다.
4. 페이지네이션 이벤트 처리
   • 사용자가 페이지 이동을 할 때마다 데이터를 다시 불러오거나, 선택된 페이지의 데이터를 실시간으로 갱신하는 이벤트를 추가할 수 있습니다.
   • 예를 들어 onPageChanged 이벤트를 활용하면 사용자가 페이지를 변경할 때마다 필요한 작업을 실행할 수 있습니다. 
   •  
5. 실무에서 자주 겪는 페이징 문제 해결
   • 성능 문제: 클라이언트에서 한 번에 많은 데이터를 페이징하면 로딩 시간이 길어질 수 있습니다. 이 경우 서버에서 데이터를 잘라서 보내는 방식으로 처리합니다.
   • 페이지네이션 UI와 데이터 동기화: 사용자가 페이지를 넘길 때 데이터가 갱신되지 않거나 불일치가 발생할 수 있습니다. 이를 방지하기 위해 페이지네이션 UI와 데이터 로드가 잘 동기화되도록 관리해야 합니다.
   • 정렬 및 필터링과의 조합: 페이징과 함께 정렬 및 필터 기능을 사용할 경우, 서버 측에서 이를 동시에 처리하여 클라이언트에 올바른 데이터를 보내는 것이 중요합니다.

gridView.onPageChanged = function (pageIndex) {
    loadPage(pageIndex + 1);
};

---

예제 코드 요약

페이징과 서버와의 연동 예제 코드:

const gridView = new RealGridJS.GridView("gridContainer");
const ds = new RealGridJS.LocalDataProvider(false);
gridView.setDataSource(ds);

// 기본 페이징 설정
gridView.setPaging(true, 50);

// 서버 측에서 특정 페이지의 데이터를 로드하는 함수
function loadPage(pageNumber) {
    const apiUrl = `/api/data?page=${pageNumber}`;
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => ds.setRows(data))
        .catch(error => console.error('Error:', error));
}

// 페이지 이동 시 이벤트 처리
gridView.onPageChanged = function (pageIndex) {
    loadPage(pageIndex + 1); // 0 기반 인덱스이므로 1을 더해줍니다.
};

참고 문서 링크

기본적인 페이징 설정 및 추가 기능에 대한 내용은 RealGrid 페이징 도움말에서 더 확인할 수 있습니다.