[JavaScript] React에서 Pagination 라이브러리 사용해보기

 

React에서 Pagination 라이브러리 사용해보기

 

---

 

 

Pagination 라이브러리: item-pagination

 

 페이지네이션을 간단하게 구현하고 싶어서 라이브러리를 만들었다🤩 item-pagination이라는 라이브러리이고, 객체 배열을 페이지로 나누어주는 함수를 제공한다. 개발 공부를 처음 시작했을 때 페이지네이션 구현을 참 어려워했던 기억이 있다. 그때의 기억을 살려 나처럼 페이지네이션을 어려워하는 누군가에게 조금이라도 도움이 되기 위해 라이브러리를 제작해보았다.

 

NPM: https://www.npmjs.com/package/item-pagination

문서: https://item-pagination.vercel.app/

 

 

사용 방법

 

1. 설치

 

npm, yarn, 혹은 pnpm을 이용하여 설치를 해준다.

 

npm 이용:

npm i item-pagination

 

yarn 이용:

yarn add item-pagination

 

pnpm 이용:

pnpm add item-pagination

 

 

2. 함수 불러오기

 

이 라이브러리에서는 단 하나의 함수만 사용하면 된다. 바로 getPagination이다.

 

getPagination(data, 6, 1);

 

 

 이렇게 함수를 불러오고 1) 페이지네이션을 적용하고 싶은 객체 배열, 2) 한 페이지 당 아이템의 개수, 3) 현재 페이지를 순서대로 인수로 넣어준다. 이렇게 작성해주면 해당 함수는 페이지네이션이 적용된 객체 배열을 리턴한다. 예를 들어보면 다음과 같다.

 

import getPagination from "item-pagination";

export default function App(){
	const data = [
    	{ name: "name 1", id: 1 },
    	{ name: "name 2", id: 2 },
    	{ name: "name 3", id: 3 },
    	{ name: "name 4", id: 4 },
    	{ name: "name 5", id: 5 },
    	{ name: "name 6", id: 6 },
    	{ name: "name 7", id: 7 },
    	{ name: "name 8", id: 8 },
    	{ name: "name 9", id: 9 },
        { name: "name 10", id: 10 }
	];

	console.log(getPagination(data, 6, 1));

}

 

 data를 페이지로 나누어 보려 한다. 한 페이지 당 아이템이 6개 들어가도록 한 뒤, 1번째 페이지에 있는 아이템 배열을 가져가고 싶다. 그렇다면 getPagination(data, 6, 1)라고 작성해주면 된다. 그럼 해당 함수는 다음과 같은 값을 반환한다.

 

 

 1번 아이템 ~ 6번 아이템의 배열을 얻을 수 있다. 그럼 두번째 페이지의 아이템을 얻기 위해서는 어떻게 작성해야할까?

 

 

 getPagination(data, 6, 2)라고 작성하면 두번째 페이지의 아이템을 얻을 수 있다. 첫번째 페이지에 1번 아이템 ~ 6번 아이템이 들어갔을 테니, 두번째 페이지에는 7번 아이템 ~ 10번 아이템이 들어간다. 이렇게 간단하게 객체 배열을 페이지 단위로 나눌 수 있다!

 

 

특징 및 활용법

 

특징

 

1. 객체 배열에만 사용할 수 있다. 객체 배열이 주어졌을 때 페이지를 나누어 주는 함수이므로, 객체가 아닌 다른 값 (ex. string, number, ...)의 배열에서는 사용할 수 없다. (보통 데이터들이 객체 배열로 주어지기 때문에 객체 배열을 기준으로 개발하였다.)

 

2. 각각의 객체에 page라는 key값이 추가된다. 이 함수는 배열 속에 포함된 객체에 page라는 key 값을 추가한 뒤, 그 key 값을 이용해서 페이지를 구분한다. 따라서 객체에 page라는 key가 새로 추가되며, 만약 기존 객체에 이미 page라는 key가 있다면 제대로 작동하지 않을 수도 있다.

 

3. 타입스크립트를 지원하며, React에 의존하지 않는다. getPagination 함수는 타입스크립트로 작성된 함수이다. 또한, 본문 예시를 React로 들긴 했지만 이 라이브러리는 React에 의존하지 않는다.

 

4. CommonJS, ESModule을 모두 지원한다. 라이브러리를 배포할 때, CJS와 ESM을 둘 다 대응할 수 있도록 설정해서 배포하였다. (참고: https://inthedev.tistory.com/101) 개발 환경이 CJS든, ESM이든 상관 없이 사용할 수 있을 것이다.

 

 

활용법

 

1. data 동적으로 설정하기: 만약 페이지네이션에 검색 기능도 넣고 싶다면 data 부분을 동적으로 바꾸어주면 된다. 예를 들어 사용자가 특정 키워드로 검색을 하고 그 검색 결과와 일치하는 목록만으로 새롭게 페이지를 구성하고 싶다면, data 부분이 고정된 값이 아니라 변수로 설정되어 있으면 그 검색 결과에 따라 새롭게 페이지네이션이 될 수 있다.

 

getPagination(list, 6, 1); // list는 동적으로 값이 변하는 객체 배열

 

2. 현재 페이지 동적으로 설정하기: 페이지 버튼을 클릭할 때마다 페이지가 아이템 목록이 변경되는 기능을 넣고 싶다면 현재 페이지 부분을 변수로 설정하면 된다.

 

getPagination(data, 6, currentPage); // currentPage는 동적으로 값이 변하는 변수

 

---

 

 예전에 작성해놓은 코드를 다시 살펴보다가 2차원 배열을 이용하여 페이지네이션을 구현해놓은 것을 발견했다. 그때는 몰랐는데 2차원 배열은 시간복잡도가 아주 별로...😅 그래서 좀 더 좋은 페이지네이션을 고민해보다가 2차원 배열이 아닌 객체를 수정하는 방식의 페이지네이션을 생각해보았고, CJS와 ESM 공부도 할 겸 라이브러리로 배포까지 해보았다.

 

 물론 난 아직도 한참 모자란 개발자라서 이 방식도 최선의 방식은 아닐 수 있지만, 예전에 작성해두었던 코드를 다시 살펴보고, 수정하고, 배포도 해보면서 또다시 이것저것 많이 배울 수 있어서 좋았다. 과거의 코드가 부끄럽다는 건 역설적으로 내가 성장하긴 했다는 증거가 되는 것 같아서 기분이 좋다.