pagination Library를 이용한 목록 구현

pagination Library는 여러가지가 있는데그중 가장 많은 다운로드를한 라이브러리는 react-js-pagination 입니다.
이걸 이용해서 게시판 글목록 비슷(?)한걸 구현할수 있습니다.

링크

먼저 프로젝트 폴더를 연다음 터미널에 다운로드 명령어를 입력해서 라이브러리를 다운로드

npm

npm install react-js-pagination

yarn

yarn add react-js-pagination

다운로드한 라이브러리를 import한후 몇가지 설정해주면 사용할수 있습니다

	<Pagination
	// 현제 보고있는 페이지 
      activePage={1}
	// 한페이지에 출력할 아이템수
	  itemsCountPerPage={5}
	// 총 아이템수
	  totalItemsCount={300}
	// 표시할 페이지수
  	  pageRangeDisplayed={5}
	// 함수
	  onChange={handlePageChange}>
	</Pagination>

매개변수

출력화면

스타일링후 출력화면

import Pagination from 'react-js-pagination'
import styled from 'styled-components'

const AxiosPost = () => {
  
  const handlePageChange = (page) => { setPage(page); };

  return (
    <div>
      <h2>API 연습</h2>
      <PaginationBox>
        <Pagination
          activePage={1}
          itemsCountPerPage={5}
          totalItemsCount={300}
          pageRangeDisplayed={5}
          onChange={handlePageChange}>
        </Pagination>
      </PaginationBox>
    </div>
  )
}

const PaginationBox = styled.div`
  .pagination { display: flex; justify-content: center; margin-top: 15px;}
  ul { list-style: none; padding: 0; }
  ul.pagination li {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #e2e2e2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem; 
  }
  ul.pagination li:first-child{ border-radius: 5px 0 0 5px; }
  ul.pagination li:last-child{ border-radius: 0 5px 5px 0; }
  ul.pagination li a { text-decoration: none; color: #337ab7; font-size: 1rem; }
  ul.pagination li.active a { color: white; }
  ul.pagination li.active { background-color: #337ab7; }
  ul.pagination li a:hover,
  ul.pagination li a.active { color: blue; }
`

export default AxiosPost

API post적용글에서 작성한 코드에 적용해보면

AxiosPost

import axios from 'axios'
import {useState} from 'react'
import Pagination from 'react-js-pagination'
import styled from 'styled-components'

const AxiosPost = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [items, setItems] = useState(5);

  const getClick = () => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(res => setData(res.data))
  }
  const postClick = () => {
    axios.post('https://jsonplaceholder.typicode.com/posts',{
      userId :11,
      id:101,
      body:'test body',
      title:'test title'
    })
      .then(res => console.log(res.data))
  }

  const handlePageChange = (page) => { setPage(page); };
  const itemChange = (e) => {
    setItems(Number(e.target.value))

  }

console.log(items*(page-1), items*(page-1)+items)

  return (
    <div>
      <h2>API 연습</h2>
      <div>
        <button onClick={getClick}>Get</button>
        <button onClick={postClick}>Post</button>
        <select name="items" onChange={itemChange}>
          <option value="5">5개</option>
          <option value="10">10개</option>
          <option value="15">15개</option>
          <option value="20">20개</option>
        </select>
      </div>
      {data.slice(
        items*(page-1),
        items*(page-1)+items
      ).map((v,i) => {
        return (
          <div key={i}>
            <h3>{v.title}</h3>
            <div>userId = {v.userId}, id = {v.id}</div>
            <div>{v.body}</div>
          </div>
        )
      })}
      <PaginationBox>
        <Pagination
          activePage={page}
          itemsCountPerPage={items}
          totalItemsCount={data.length-1}
          pageRangeDisplayed={5}
          onChange={handlePageChange}>
        </Pagination>
      </PaginationBox>
    </div>
  )
}

const PaginationBox = styled.div`
  .pagination { display: flex; justify-content: center; margin-top: 15px;}
  ul { list-style: none; padding: 0; }
  ul.pagination li {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #e2e2e2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem; 
  }
  ul.pagination li:first-child{ border-radius: 5px 0 0 5px; }
  ul.pagination li:last-child{ border-radius: 0 5px 5px 0; }
  ul.pagination li a { text-decoration: none; color: #337ab7; font-size: 1rem; }
  ul.pagination li.active a { color: white; }
  ul.pagination li.active { background-color: #337ab7; }
  ul.pagination li a:hover,
  ul.pagination li a.active { color: blue; }
`

export default AxiosPost

결과 영상

이미지 클릭(영상 링크)