react-table paging

import React, { useState , useEffect , useMemo } from 'react';
import logo from './logo.svg';
import ReactTable from "./reactTable"; 
import Paging from "./paging"; 
import './App.css';

function App() {
  
  const [page , setPage] =  useState(1);
  const [count , setCount] =  useState(5);
  const [rows , setRows] = useState(5);

  /* 처음에 data 가져오기  */
  useEffect(() => {
    fetch("/api/v1/test?page=0&size=5&sort=pidx,asc")
    .then((response) => { 
        return response.json().then((data) => {
            setData(data.content);
            setCount(data.totalElements);
        }).catch((err) => {
            console.log(err);
        }) 
    });
  }, []);  

  /* page 바꾸고 다시 가져오기   */
  const handleFetch = (page,rows,sort) => {
		fetch(`/api/v1/test?page=${page}&size=${rows}&sort=${sort}`)
			.then(response => response.json())
			.then(data => {
        setData(data.content);
        setCount(data.totalElements);
			})
			.catch(error => console.error('Error', error));
	};

  /* 페이지 변경 함수  */
  const handlePageChange = (page) => {
    setPage(page)
    handleFetch(page-1, rows ,'pidx,desc');
  };



  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <br></br>
        <br></br>
        <ReactTable columns={dataColumns} data={data} />
        <Paging page={page} count={count} onPageChange={handlePageChange} 
        />
        <br></br>
        <br></br>
      </header>
    </div>
  );
}

export default App;

import React, { useState } from "react";
import './paging.css'; 
import Pagination from "react-js-pagination";
const Paging = ({page,count,onPageChange}) => {
    return (
        <Pagination
            activePage={page}
            itemsCountPerPage={5}
            totalItemsCount={count}
            pageRangeDisplayed={5}
            prevPageText={"‹"}
            nextPageText={"›"}
            onChange={onPageChange}
    />);
};
export default Paging;