github API를 이용해서 repository를 검색하면 검색어에 해당하는 repository 이름을 10개씩 보여주고 페이지네이션으로 나누어서 페이지를 눌렀을 때 마다 그 페이지에 해당하는 repository를 보여주는 페이지를 만들었다.

Results.jsx (아이템 목록이 나오는 컴포넌트)

import React from "react";
import axios from "axios";
import { useState } from "react";
import { useEffect } from "react";
import List from "./List";
import Pagination from "./Pagination";

const Results = () => {
  const [data, setData] = useState([]);
  const [inputValue, setInputValue] = useState("");
  const accessToken = process.env.REACT_APP_ACCESS_TOKEN; // 깃허브 토큰
  const headers = {
    Accept: "application/vnd.github.nightshade-preview+json",
    Authorization: `token ${accessToken}`,
  };
  const getData = (keyword, page) => {
    axios
      .get(
        `https://api.github.com/search/repositories?q=${keyword}&per_page=10&page=${page}`,
         // 깃허브 api 사용 10페이지씩 보여준다.
        headers
      )
      .then((data) => {
        setData(data.data);
      });
  };

  const search = (e) => {
    setInputValue(e.target.value);
  };

  const searchData = (page = 1) => {
    getData(inputValue, page);
  };

  const clickKey = (e, page = 1) => {
    if (e.code === "Enter") {
      getData(inputValue, page);
    }
  };

  return (
    <div>
      <input onChange={search} onKeyUp={clickKey} />
      <button onClick={searchData}>검색</button>
      {data.length === 0
        ? null
        : data.items.map((obj, index) => {
            return (
              <List key={index} items={obj}>
                {obj.name}
              </List>
            );
          })}
      <Pagination totalCount={data.total_count} searchData={searchData} />
    </div>
  );
};

export default Results;

List.jsx

import React from "react";
import styled from "styled-components";

const ListContainer = styled.div`
  border: 1px solid silver;
  padding: 30px;
`;
const ListTitle = styled.div``;

const List = ({ items }) => {
  return (
    <ListContainer>
      <ListTitle>{items.name}</ListTitle>
    </ListContainer>
  );
};

export default List;

Pagination.jsx (페이지네이션 버튼)

import React from "react";
import { useState } from "react";
import styled from "styled-components";

const PaginationButton = styled.button`
  background-color: white;
  border: none;
  cursor: pointer;
  &.focused {
    background-color: navy;
    border-radius: 100px;
    color: white;
  }
`;

const Pagination = ({ totalCount, searchData }) => {
  const itemArr = [1, 2, 3, 4, 5];
  const [pages, setPages] = useState(0);
  const [markPage, setMarkPage] = useState(0);
  const totalPage = Math.floor(totalCount / 10);
  const goNext = () => {
    if (pages < totalPage && pages <= 90) {
      setPages(pages + 5);
      searchData(pages + 1);
      setMarkPage(0);
    }
  };
  const goPrevious = () => {
    if (pages >= 5) {
      setPages(pages - 5);
      searchData(pages + 1);
      setMarkPage(0);
    }
  };
  //   console.log(pages + 1);
  return (
    <div>
      <PaginationButton onClick={goPrevious}>&#60;</PaginationButton>
      {itemArr.map((el, index) => {
        return (
          <PaginationButton
            key={index}
            className={markPage === index ? "focused" : null}
            onClick={() => {
              searchData(el + pages);
              setMarkPage(index);
            }}
          >
            {el + pages}
          </PaginationButton>
        );
      })}
      <PaginationButton onClick={goNext}>&#62;</PaginationButton>
    </div>
  );
};

export default Pagination;