반응 : 나만의 페이지 매김 만들기

안녕하세요 커뮤니티,

오늘은 패키지를 사용하지 않고 자신만의 페이지 매김을 만드는 방법을 보여 드리겠습니다.

시작하자

가장 먼저 해야 할 일은 반응 앱을 만드는 것입니다.

npx create-react-app make-pagination
cd make-pagination //navigate to our project
code . //open our react app with vscode

사용자의 데이터를 가져오고 싶다고 가정해 보겠습니다.
Mockaroo을 사용하여 더미 데이터를 생성합니다.
src 폴더에 새 파일data.js을 만듭니다. 이 파일에는 사용자 더미 데이터가 포함됩니다.

//data.js
export const Data = [
{"id":1,"name":"Anna-maria","email":"[email protected]"},
{"id":2,"name":"Kenyon","email":"[email protected]"},
{"id":3,"name":"Twila","email":"[email protected]"},
{"id":4,"name":"Rudd","email":"[email protected]"},
{"id":5,"name":"Robby","email":"[email protected]"},
{"id":6,"name":"Viviyan","email":"[email protected]"},
{"id":7,"name":"Gabriello","email":"[email protected]"},
{"id":8,"name":"Carter","email":"[email protected]"},
{"id":9,"name":"Berna","email":"[email protected]"},
{"id":10,"name":"Marlow","email":"[email protected]"},
{"id":11,"name":"Corella","email":"[email protected]"},
{"id":12,"name":"Cherida","email":"[email protected]"},
{"id":13,"name":"Zackariah","email":"[email protected]"},
{"id":14,"name":"Orelee","email":"[email protected]"},
{"id":15,"name":"Alonzo","email":"[email protected]"},
{"id":16,"name":"Vonnie","email":"[email protected]"},
{"id":17,"name":"Weidar","email":"[email protected]"},
{"id":18,"name":"Cyb","email":"[email protected]"},
{"id":19,"name":"Melisent","email":"[email protected]"},
{"id":20,"name":"Darbee","email":"[email protected]"}
]

이제 페이지 매김 없이 이러한 사용자를 가져오겠습니다.
먼저 "user"폴더를 만든 다음 기본 CSS 스타일이 필요하기 때문에 두 개의 파일user.jsx 구성 요소와 user.css 파일을 만듭니다.

//user.jsx
import React from 'react';
import './user.css';

const User = ({name, email}) => {
    return ( 
        <div className='user'>
            Name : {name} <br/>
            Email : {email}
        </div>
     );
}

export default User;

/* user.css */
.user{
    padding: 10px;
    margin:10px auto;
    width:50%;
    border : 1px solid #eee;
}

"App.js"구성 요소에서 user.jsx 및 Data.js를 가져오고 데이터를 가져옵니다.

//App.js
import React from 'react';
import './App.css';
import { Data } from './data';
import User from './user/user';

function App() {
  return (
    <div className="App">
    <h1>ALL USERS</h1>
      {
        Data.map(user => <User key={user.id}
                               name={user.name}
                               email={user.email} />
        )
      }
    </div>
  );
}

export default App;

결과


같은 페이지에 20명의 사용자가 있는 경우 페이지 매김을 사용해야 하는 경우 약간 짜증이 납니다.

페이지 매김 구성 요소 만들기

1- pagination 폴더 생성에는 두 개의 파일 pagination.jsx 및 pagination.css가 포함됩니다.

먼저 lodash 패키지를 설치해야 합니다.

npm i --save lodash

//pagination.jsx
import React from 'react';
import _ from 'lodash';
import './pagination.css';

const Pagination = (props) => {

    const { itemsCount, pageSize, currentPage, onPageChange } = props;
    const pageCount = Math.ceil(itemsCount / pageSize);
    if (pageCount === 1) return null;
    const pages = _.range(1, pageCount + 1);

    return (
        <div className="pagination">
            {pages.map(page => (
                <div href={null} key={page}
                    onClick={() => onPageChange(page)}
                    className={page === currentPage ? 'active' : 'page-item'}>
                    {page}
                </div>
            ))}
        </div>
    )
}

export default Pagination;

itemsCount, pageSize, currentPage 및 onPageChange는 App.js 구성 요소에서 페이지 매김을 구현할 때 전달할 소품입니다.

/* pagination.css */
.pagination {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination div {
  color: white;
  float: left;
  padding: 8px 16px;
  display: block;
  text-decoration: none;
  transition: background-color 0.3s;
  cursor: pointer;

}

/* Style the active/current link */
.pagination div.active {
  background-color: #05aff1;
}

/* Add a grey background color on mouse-over */
.pagination div:not(.active) {
  background-color: #444444;
}

2- 더미 데이터를 분할할 자바스크립트 로직 생성

src 폴더에 paginate.js 파일을 만듭니다.

import _ from 'lodash';

export function paginate(items, pageNumber, pageSize){
   const startIndex = (pageNumber - 1) * pageSize;

   return _(items)
            .slice(startIndex)
            .take(pageSize)
            .value();
}

이 함수는 모든 데이터(항목), pageNumber(20명의 사용자가 있고 각 페이지에 4명의 사용자가 필요한 경우 이동하려는 페이지 수 20/4=5페이지 3페이지의 사용자를 보려면 시작합니다. 인덱스에서 데이터를 슬라이스: (3-1)*4=8), pageSize(각 페이지의 사용자 수) 및 반환 새 테이블에는 pageSize 요소가 포함되어 있습니다.

3- 페이지 매김 구현

App.js 구성 요소에서 :paginate에서 가져오기paginate.js 기능 및 가져오기useState 후크

  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 4;

  const handlePageChange = page => {
    setCurrentPage(page);
  }

  const getPageData = () => {

    const paginationData = paginate(Data, currentPage, pageSize);
    return { totalCount: Data.length, data: paginationData }
  }

  const { totalCount, data } = getPageData();

이제 pagination 구성 요소를 가져오고 결과를 확인하겠습니다.

const { totalCount, data } = getPageData();
  return (
    <div className="App">
      <h1>ALL USERS</h1>
      {
        data.map(user => <User key={user.id}
          name={user.name}
          email={user.email} />
        )
      }
      <Pagination
        itemsCount={totalCount}
        pageSize={pageSize}
        currentPage={currentPage}
        onPageChange={handlePageChange} />
        page {currentPage} of { totalCount / pageSize }
    </div>

최종 결과




이 블로그를 즐겼기를 바랍니다.