PagiNation 1

페이지네이션
    1. 기본 페이지네이션 
        1 2 3 4 5 6 7 8 9 10 11 12 13 ....
    
    2. 순차 페이지네이션 
        이전으로 10 11 12 13 14 15 16 다음으로

    3. 더보기 페이지네이션
        세로로 특정 내용까지만 보여주고 더보기 버튼을 누르면 보여주는 페이지네이션

    4. 무한 스크롤 페이지네이션 
        세로로 계속 보여주는 페이지네이션
        스크롤 페이지네이션을 작성하기 위해 npm에서 scroll과 관련된 라이브러리를 가져와서 install해주는게 좋음 
        : npm i react-infinite-scroller

 

 

Pagination.js

 

import React from 'react';
import './Pagination.css';

const Pagination = ({itemPerPage, totalItems, paginate, currentPage}) => {

    const pageNumbers = [];

    //전체 항목 수와 페이지당 항목 수를 바탕으로 전체 페이지 수를 계산

    //pageNumbers에 페이지 번호 저장
    for(let i = 1; i <= Math.ceil(totalItems / itemPerPage); i++){

        console.log("i값 : " + i);
        pageNumbers.push(i); //push : 값을 추가. pageNumbers에 만들어진 번호들을 추가
    }

    return(
        <nav>
            <ul className='pagination'>                 
                {pageNumbers.map(number => (
                    <li key={number} className={`page-item ${currentPage === number ? 'active' : ''}`}>
                        <a onClick={() => paginate(number)} href="!#" className='page-link'>
                            {number}
                        </a>
                    </li>
                ))}
            </ul>
        </nav>
    )
}
export default Pagination;

 

** const Pagination = ({itemPerPage, totalItems, paginate, currentPage})

- itemPerPage : 한 페이지에 보여줄 항목 수
- totalItem : 전체 항목 개수
- paginate : 페이지 번호를 업데이트하는 함수
- currentPage : 현재 페이지 번호

** for(let i = 1; i <= Math.ceil(totalItems / itemPerPage); i++){

 

20개의 글이 존재, 한 페이지당 3개 글씩 보여주려면 => 20 / 3 = 6.6666.. => ceil로 올림 해서 7페이지로 만듦

 

** {`page-item ${currentPage === number ? 'active' : ''}`}
: 만약 현재 페이지와 map에서 가리키는 번호가 일치한다면
className = "page-item active"

현재 페이지번호와 map에서 가리키는 번호가 다르다면(현재 페이지 이외 다른 페이지 번호들)
className = "page-item"

 

**  <a onClick={() => paginate(number)} href="!#" className='page-link'>

- href="!#" : 클릭 이벤트가 발생했을 때 페이지 새로고침 방지 

<a onClick={(e) =>{e.preventDefault(); paginate(number);}} href="/"> = 위 문구와 같은 의미

페이지네이션