Key point

import { useNavigate, useLocation } from "react-router-dom";

useParams를 써서 동적라우팅 하는 것과 매우 비슷한 방법이다.
url의 정보를 바꾼뒤 url의 엔드포인트로부터 정보를 가져와서 페이지를 바꿔주는 방식이다.

import React, { useState, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import Buttons from "./Components/Button";
import CardList from "./Components/Cardlist/CardList";
import "./User.scss";
import axios from "axios";

// 자주 사용하는  limit같은 상수는 상수데이터로 만들어주면 유지보수하기 편하다
const LIMIT = 10;

export default function Users() {
  const [users, setUsers] = useState([]);
  const navigate = useNavigate(); // url 현위치 뒤쪽으로 덧붙임
  const location = useLocation();
  // console.log(location); // path, search

  useEffect(() => {
    axios // data로 반환되니 잘이용하도록.
      .get( // get은 default로 생략 가능
        `https://node-pagnation.herokuapp.com/users${
          location.search || `?limit=${LIMIT}&offset=0`
          // 처음 웹페이지를 열면 search의 값이 없는상태,
          // || 연산자: 초기값이  falsy할때 초기값을 부여함.
          // *참고) &&연산자 : trusy할때 작동시키는것과 반대
        }`
      )
      // fetch를 안쓰고 axios를 써서 json형식으로 변환하는 과정을 생략한다. -> then((res) => res.json()) 안써줌
      .then((res) => setUsers(res.data.users));
  }, [location.search]);

  const updateOffset = (buttonIndex) => {
    const offset = LIMIT * buttonIndex;
    const queryString = `?limit=${LIMIT}&offset=${offset}`;
    navigate(queryString);
  };

  return (
    <div className="photos">
      <h1>Mini Project - Pagination</h1>
      <Buttons updateOffset={updateOffset} users={users} />
      {/* updateOffset의 파라미터로 아무것도 전달 안해도 연결됨. */}
      <CardList users={users} />
    </div>
  );
}

import React from "react";
import "./Button.scss";

export default function Buttons({ updateOffset, users }) {
  return (
    // 20개 됐으면 전체 값의 100에서 20을 나눈 5개의 버튼만 있어야지
    <div className="pageBtn">
      {users.map((_, idx) => {
        while (idx < 100 / users.length) {
          return (
            <button key={idx} onClick={() => updateOffset(idx)}>
              {idx + 1}
            </button>
          );
        }
      })}
    </div>
  );
}

import React from "react";
import Card from "../Card/Card";
import "./CardList.scss";

export default function CardList({ users }) {
  return (
    <div className="cardList">
      {users.map((user) => {
        return (
          <Card
            key={user.id}
            id={user.id}
            name={user.name}
            email={user.email}
            phoneNumber={user.phone_number}
          />
        );
      })}
    </div>
  );
}

import React from "react";
import "./Card.scss";

export default function Card({ id, name, email, phoneNumber }) {
  return (
    <div className="cardContainer">
      <p>{id}</p>
      <p>{name}</p>
      <p>{email}</p>
      <p>{phoneNumber}</p>
    </div>
  );
}