react pagination 구현하기

페이지네이션이란?

가지고 있는 많은 데이터를 , 한 화면에 전부 보여줄 수 없는 경우에 사용합니다.
데이터를 일정 길이로 끊어서 전달해줍니다.

ex)

웹 서비스에서 자주 사용했지만 한번도 구현해본적 없는 기술이였습니다.
이번기회에 기술이해 해보는 시간을 가져보겠습니다.

페이지네이션 기술의 이해

웹 서비스에서 많이 사용 되는 기술이니 정확한 이해를 가지고 구현하면 좋을거같습니다.

1. 게시물을 여러 페이지에 나눠서 표시하려면 총 몇개의 페이지가 필요한지 알아야합니
다.

총 몇개의 페이지가 필요한지 알기 위해서는 총게시물수 / 표시할 게시물 수로 나눈뒤 올림을 하면 몇개의 페이지가 필요한지 계산할 수 있습니다.

ex) 총 26 개의 게시물 있고 페이지당 표시하고싶은 게시물은 10개다
26 /10 = 2.6 여기서 올림하면 총 3개의 페이지가 필요하게 됩니다.

2.해당 페이지의 첫게시물의 위치(index)를 알아야합니다.

페이지 번호에서 1을 뺀후 페이지 당 표시할 게시물의 수를 곱하면 첫 게시물의 위치를 계산할수 있습니다.

1 페이지의 첫 게시물의 위치(index) => (1 - 1) 10 = 0
2 페이지의 첫 게시물의 위치(index) => (2 - 1) 10 = 10
3 페이지의 첫 게시물의 위치(index) => (3 - 1) * 10 = 20

### 구현예시

app.js

// 데이터를 담을 상태
const [posts, setPosts] = useState([]);

// 페이지당 제한하고 싶은 게시물의 갯수
const [limit, setLimit] = useState(10);

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

// 해당 페이지의 첫게시물의 위치계산 
const offset = (page - 1) * limit;


<div>          // slice를 이용하여 보여주고 싶은 게시물을 제어
   {posts.slice(offset, offset + limit).map(({ 맵에 필요한값 }) => (
          <article key={id}>
            표현할 게시물
          </article>
        ))}
</div>

Pagination.js

const Pagination = ({ total, limit, page, setPage }) => {
  // 올림 차수로 계산 
  const numPages = Math.ceil(total / limit);

  return (
    <>
      <Nav>
        <Button onClick={() => setPage(page - 1)} disabled={page === 1}>
          &lt;
        </Button>
        {Array(numPages)
          .fill()
          .map((v, i) => (
            <Button
              key={i + 1}
              onClick={() => setPage(i + 1)}
              aria-current={page === i + 1 ? "page" : null}
            >
              {i + 1}
            </Button>
          ))}
        <Button onClick={() => setPage(page + 1)} disabled={page === numPages}>
          &gt;
        </Button>
      </Nav>
    </>
  );
}

export default  Pagination;