8. pagination

1. 개념

페이지네이션은 페이지를 이동하고 싶을 때 사용하는 것이다.

최근에 페이지네이션을 리액트로 구현해봤다.

구현해보면서 사용한 로직을 정리해보았다.

2. 적용 코드

아래 Wiki 컴포넌트는 페이지네이션과

페이지네이션을 적용할 글 목록 리스트를 리턴해주는 컴포넌트다.

const Wiki = () => {
  const [wikiList, setWikiList] = useState("");
  const [limit, setLimit] = useState(5);
  const [page, setPage] = useState(1);
  const offset = (page - 1) * limit;

  const getWiki = async () => {
    const res = await getWikiAxios();
    setWikiList(res);
  };

  useEffect(() => {
    getWiki();
  }, []);

  return (
    <>
      <WikiUl>
        {wikiList.slice(offset, offset + limit).map((item) => {
          return (
            <>
              <WikiList key={item.id} id={item.id} title={item.title} />
            </>
          );
        })}
      </WikiUl>
      <Pagination
        total={wikiList.length}
        limit={limit}
        page={page}
        setPage={setPage}
      />
    </>
  );
};

export default Wiki;

페이지네이션 컴포넌트에서는

글의 개수(total)와, 한페이지당 제한하고 싶은 글 목록의 개수(limit) 등을 프롭스로 받아온다.

const Pagination = ({ total, limit, page, setPage }) => {
  const totalPages = Math.ceil(total / limit);

  return (
    <Navbar>
      <Btn onClick={() => setPage(page - 1)} disabled={page === 1}>
        &lt;
      </Btn>
      {Array(totalPages)
        .fill()
        .map((value, index) => (
          <Btn
            key={index + 1}
            onClick={() => setPage(index + 1)}
            aria-current={page === index + 1 ? "page" : null}
          >
            {index + 1}
          </Btn>
        ))}
      <Btn onClick={() => setPage(page + 1)} disabled={page === totalPages}>
        &gt;
      </Btn>
    </Navbar>
  );
};

export default Pagination;

전체적인 로직은 Navbar안에 버튼들을 totalPages의 개수만큼 리턴하는 것이다.

버튼들을 리턴할 map을 사용하기 전에 map에 적용할 배열이 필요했다.

 

이 배열의 요소개수인 index개수만큼 map이 요소를 돌아서 버튼들을 리턴해줘야 했기 때문에

총 필요한 버튼들의 개수인 totalPages와

배열을 만들어주고 요소를 채워주는 Array().fill()을 사용했다.

 

aria-current는 웹 접근성을 개선하기 위해 필수는 아니지만 적용하였다.

 

Array(totalPages)
        .fill()
        .map((value, index) => (
          <Btn
            key={index + 1}
            onClick={() => setPage(index + 1)}
            aria-current={page === index + 1 ? "page" : null}
          >
            {index + 1}
          </Btn>
        ))}

3. 결론

페이지네이션을 구현 할 때

array와 map을 활용해서 만들 수 있다.

웹접근성을 고려하여 aria-current도 적용하는 것이 필요하다.

 

참고사이트

https://www.daleseo.com/react-pagination/

React로 페이지네이션 UI 구현하기