[React] 클라이언트에서 pagination 구현하기 1. (심플버전)

복잡버전 보러가기

 

심플한 버전과 복잡한 버전 2 가지 페이지네이션 중 심플한 버전을 구현해보자.

1. 클라이언트에서 페이지네이션 구현하는 경우는 언제인가?

• 백엔드에서 부득이하게 pagination 기능을 제공할 수 없을 때 사용할 수 있다.
• 백엔드에서 주는 데이터가 방대하지 않아서 클라에서 전체 데이터를 한번에 받음으로써 api호출 양을 줄이고 싶을 때.
• 써드파티 api를 사용하는데, 하루/한달 단위 api호출 양(unit)이 한정적일 경우, 최대한 api호출 횟수를 줄이기 위해 사용할 수 있다.
  • 예를 들어 youtube api 호출을 하루에 100번만 가능하다.
  • 유저에게 pagination기능을 제공하고 싶은데 이전페이지, 다음페이지 마다 api호출이 가는걸 최대한 막고 싶다.
  • 나는 한 페이지당 5개의 데이터만 보여줌으로써 유저가 보기 편하게 하고 싶다.
  • 이럴 경우 youtube list api한 번 호출 시 최대 50개의 데이터를 받을 수 있는데, 50개를 한 번에 다 받아서 클라이언트에서 5개씩 쪼개서 보여주고, 50개를 다 보여주면 그 때 추가로 50개를 받아서 나머지를 보여주는 방식을 사용할 수 있다.

 

2. 심플한 버전 (https://playcode.io/971100) 

심플한 버전은 클라에서 한 번에 모든 데이터를 받은 뒤 쪼개서 보여주는 방법이다.

나는 material-ui의 TablePagination컴포넌트를사용했다.

import React,{useState,useEffect} from 'react';
import data from './mock.json' //전체 데이터가 들어있다.
import { TablePagination } from '@material-ui/core';

export function App(props) {
  const [page, setPage] = useState(0);
  const [currentData, setCurrentData]=useState([]); //쪼갠 데이터를 저장해 둘 값
  const rowsPerPage = 3; //한 페이지 당 몇개의 데이터를 보여줄건지.

  useEffect(() => {
    updatePage();
  }, [page, data]);

  function updatePage() {
    const cut = page * rowsPerPage; //페이지는 0부터 시작한다.
    let sliced=[]; //자른 데이터를 임시로 저장할 변수.

    //slice의 첫번째 인자는 배열을 자를 때 몇번째 index부터 자를건지,
    //두번째 인자는 몇번째 index까지 자를건지를 입력한다. 
    //주의사항은, 두번째 인자의 경우 바로 직전 index까지를 자른다. 
    //slice(0,5) => 0부터 4까지 자름.
    sliced = data.data?.slice(cut, cut + rowsPerPage);

    //결과물을 state에 저장해줌
    setCurrentData([...sliced]);
  }

  const handleChangePage = (event, newPage) => {
    //pagination 이전, 다음 버튼을 누르면 page정보를 업데이트 한다.
    setPage(newPage);
  };

  return (
    <div className='App'>
      {currentData.map((item)=>(
        <div key={item.id} style={{borderBottom:'1px solid #eee', padding:'8px'}}>
        {item.name}
        </div>
      ))}
      <TablePagination
          component='div'
          labelRowsPerPage=''
          count={data.data.length ?? 0} //전체 데이터 갯수 number로 넣어준다.
          page={page} //현재 페이지 정보를 number로 입력. (2페이지면 2)
          onPageChange={handleChangePage} //이전, 다음 버튼을 누를 시 트리거되는 함수
          rowsPerPage={rowsPerPage} //한 페이지당 몇개의 데이터를 보여줄건지를 number로 넣는다.
          rowsPerPageOptions={[]}
       />
    </div>
  );
}