[React] react-js-pagination으로 페이지네이션 구현하기

https://www.npmjs.com/package/react-js-pagination

react-js-pagination

 

리엑트로 리스트를 구현할 일이 있어 페이지네이션을 사용해 보기로 했다.

페이지네이션 구현을 도와주는 라이브러리 중 다운로드량이 많은 react-js-pagination 라이브러리를 사용하기로 결정!

(👉전체 코드 보러가기)

 

⚙️ 설치

npm install react-js-pagination

👉 Pagination 컴포넌트 구현

페이지네이션하고자 하는 원본 리스트

// 서버에서 응답받은 주식 리스트
const [stockList, setStockList] = useState([]);

 

현재 페이지 번호를 저장하고 있는 useState

// 현재 페이지 번호
const [page, setPage] = useState(1);

 

한 페이지에 보여줄 게시글 개수를 저장하고 있는 변수

// 페이지 당 게시글 개수
const itemsPerPage = 10;

 

페이지 변경을 핸들링할 함수

// 페이지 이동
const changePageHandler = (page) => {
	setPage(page);
};

 

현재 페이지에 보여줄, 원본 리스트에서 slice 한 리스트

// 페이지네이션을 통해 보여줄 slice된 리스트
const [currentList, setCurrentList] = useState(stockList);

 

 

처음 페이지를 로드하거나, 페이지를 이동하거나 원본 리스트에 변경이 있었을 경우

화면에 보여줄 리스트를 원본 리스트에서 다시 slice 하기 위한 useEffect

// stockList에서 slice할 index 범위
const indexOfLastItem = page * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;

// 페이지가 바뀌거나 필터 변경으로 주식 리스트 변경 시, currentList 다시 정의
useEffect(() => {
	setCurrentList(stockList.slice(indexOfFirstItem, indexOfLastItem));
}, [page, stockList]);

 

 

위의 변수와 함수를 통해 구현되는 컴포넌트

  {/* 목록 */}
  <div>
    {/* 타이틀 */}
    <div>
      <div>순위</div>
      <div>종목명</div>
      <div>현재가</div>
      <div>전일대비</div>
      <div>전일대비율</div>
    </div>
    {/* currentList에서 map으로 하나씩 item을 거내 StockItemForm 컴포넌트 생성 */}
    {currentList.map((item) => (
      <div>
        <StockItemForm item={item} />
      </div>
    ))}
  </div>
  {/* 페이지네이션 컴포넌트 */}
  <Pagination
    activePage={page} // 현재 페이지
    itemsCountPerPage={itemsPerPage} // 한 페이지 당 보여줄 아이템 갯수
    totalItemsCount={stockList.length} // 총 아이템 갯수
    pageRangeDisplayed={5} // paginator에 나타낼 페이지 범위
    prevPageText={"<"} // "이전"을 나타낼 텍스트
    nextPageText={">"} // "다음"을 나타낼 텍스트
    onChange={changePageHandler} // 페이지 변경을 핸들링하는 함수
  />

🎨 Pagination css

이 프로젝트에서는 Tailwind CSS를 사용하고 있었는데, react-js-pagination의 Pagination 컴포넌트에 tailwind를 적용시키는 방법을 찾지 못해 Pagination을 위한 css 파일만 따로 생성해서 적용했다.

.pagination {
  width: 50%;
  height: 5%;
  display: flex; /* flex row 사용*/
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center; /* 수직 중앙 정렬 */
  margin-bottom: 0.5rem;

  li { /* Pagination 컴포넌트의 각 요소들은 li로 묶여있음(개발자 모드에서 실제 태그 구성을 확인해보자) */
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex; /* flex 사용 */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */

	/* 마우스를 올리거나 해당 요소가 선택되어 있는 경우 */
    &:hover,
    &:active,
    &.active {
      /* 배경색과 요소 색을 바꿔줌 */
      background-color: #60a5fa;
      color: white;
    }
  }
}