데이터 요청(axios)로구현한 페이지 네이션

 let pageCount = 5;
  if (lastNum > total) {
    pageCount = total % 5;
  }​

  let pageCount = 5;
  if (lastNum > total) {
    pageCount = total % 5;
  }

5개씩 보여지는 Pagination

Pagination의 맨앞에 들어가는 버튼이다. 5개씩 잘라서 만든다
첫 번째 Page 1번
두 번째 Page 6번
세 번째 Page 11번

네 번째  Page 16번

첫 번째 페이지 = 현재 페이지 - (현재페이지 % 5) + 1
마지막 페이지 = 현재 페이지 - (현재페이지 % 5) + 5  공식을 같게된다

만약 마지막 페이지인 5 번을 누르면  onClick함수로 인해 바로 6으로 되어 버리는 현상이 발생하고 화살표만으로 다음페이지 이전 페이지를 넘길수 있으므로 state를 하나 더 만들고 초깃값을 page로 설정해준다

내가 보여주어야할 5개 페이지보다 작은 경우가 있을수 있으므로 예외처리를 해준다

 let pageCount = 5;
  if (lastNum > total) {
    pageCount = total % 5;
  }

현재 페이지와 일치하는 번호에 불들어오게 하는 방법

aria-current상태를 사용하여  이 요소가 컨테이너 또는 관련 요소 집합 내의 현재 항목을 나타내준다 !

  setCurrPage(page - 2)를 해야 뒤로가기가 제대로 작동하는데 아직도 이유를 모른다.. 누군가 알려줬으면

const MatchPagination = ({ setPage, page, total }) => {
  const [currPage, setCurrPage] = useState(page);
  let firstNum = currPage - (currPage % 5) + 1;
  let lastNum = currPage - (currPage % 5) + 5;
  console.log(currPage);
  let pageCount = 5;
  if (lastNum > total) {
    pageCount = total % 5;
  }
  return (
    <Wrap>
      <Btn
        className="icon"
        onClick={() => {
          if (page <= 1) {
            return;
          }
          setPage(page - 1);
          setCurrPage(page - 2);
        }}
      >
        {total > 5 && <ArrowBack />}
      </Btn>
      {Array(pageCount)
        .fill()
        .map((_, i) => (
          <Btn
            key={i + 1}
            aria-current={page === firstNum + i && "page"}
            onClick={() => {
              setPage(firstNum + i);
            }}
          >
            {firstNum + i}
          </Btn>
        ))}
      <Btn
        className="icon"
        onClick={() => {
          if (total <= page) {
            return;
          }
          setPage(page + 1);
          setCurrPage(page);
        }}
      >
        {total > 5 && <ArrowForward />}
      </Btn>
    </Wrap>
  );
};
export default MatchPagination;