[JS, React] 페이징 처리 시 인덱스를 역순으로 처리

 

사건의 경위는 이러하다.. 

검색어를 입력했을 때 검색결과를 가장 큰 수부터 거꾸로 보이게 해야한다. 

그러니까 검색 결과가 87 건이라면 첫번째로 보여주는 데이터의 번호는 87, 86, 85 ... 이런식으로 했어야하는 것.

해당 업체에서 낮은 버전의 java를 사용하여 서버에서 역순으로 내려주던 함수가 사용이 불가능했던 것이다..

그래서 프론트에서 처리를 해주게 되었다.

 

계산식

전체 목록 수 - index - (현재 페이지 * 페이지당 데이터 개수 - 페이지당 데이터 개수)

 

1. (현재 페이지 * 페이지당 데이터 개수 - 페이지당 데이터 개수): 현재 페이지에서 보여질 마지막 아이템의 인덱스
   -> 현재 페이지에서 보여지는 마지막 아이템 바로 다음 아이템의 예상인덱스에서 1페이지 당 데이터 개수를 뺀다. 즉 실제로는 현재 페이지에서 보여질 마지막 아이템의 인덱스를 구하는 것임
2. 전체 목록 수 - index: 전체 데이터에서 계산된 인덱스를 빼서 역순으로 보여질 첫 번째 아이템의 인덱스
   -> 전체 데이터에서 현재 페이지에서 보여질 첫 번째 아이템의 인덱스를 얻을 수 있다. 그러니까 역순으로 표시할 때도 첫번째가 될 것임. 
   
   

예를 들어, 전체 목록이 100개라면 현재 페이지가 3페이지고, 페이지당 10개를 보여준다고 하면 (3-1) x 10 = 20 이 될 것이고, 따라서 전체 목록 수 - index = 100 - 20 = 80 이된다. 즉 3페이지에서 역순으로 정렬된 데이터의 첫번째 인덱스이다.

// 전체 목록 수
const totalItems = 100;

// 현재 페이지
const currentPage = 3;

// 페이지당 데이터 개수
const itemsPerPage = 10;

// 현재 페이지에서 보여질 첫 번째 아이템의 인덱스 계산
const index = (currentPage - 1) * itemsPerPage;

// 역순으로 정렬된 인덱스 계산
const reversedIndex = totalItems - index;

 

 

코드로 적어보면 위와 같다. 

 

 

 

여기까지는 이제 현재 페이지에서 보여지는 첫 인덱스를 계산했고, 이를 실제 코드에 반영한 것은 다음 결과다.

const {
          resultData: { paging, resultList },
      } = data;

const currentPage = Number(paging.currentPage); // 현재 페이지
const itemsPerPage = Number(paging.recordCountPerPage); // 한 페이지에 정해진 목록 개수
const totalItems  = Number(paging.totalRecordCount); // 전체 목록 수

resultList.map((el: any, idx: number) => {
     el.no = totalItems - idx - (currentPage * itemsPerPage - itemsPerPage);
});

 

서버에서 받은 배열인 resultList의 각 아이템에 no에 역순으로 만든 값을 부여할 건데,

totalItems - idx(역순으로 정렬된 상태의 아이템 인덱스)에서 currentPage * itemsPerPage - itemsPerPage(현재 페이지에서 보여지는 첫 번째 아이템의 인덱스)를 빼준다.
이제 이 값들을 el.no에 할당한다.

 

 

한눈에 보기(예시)

const currentPage = 3 // 현재 페이지
const itemsPerPage = 5 // 한 페이지에 정해진 목록 개수
const totalItems = 30 // 전체 목록 수

const resultList = [
  { data: 'Item 1' },
  { data: 'Item 2' },
  { data: 'Item 3' },
  { data: 'Item 4' },
  { data: 'Item 5' }
];

resultList.map((el: any, idx:number) => {
    el.no = totalItems - idx - (currentPage * itemsPerPage - itemsPerPage);
});

console.log(resultList);

 

이렇게 했더니 결과는

이렇게 값이 할당되어서 ag-grid에 쉽게 값을 넣을 수 있었당