[PP1] jpa + springboot + mysql + react (3)(게시물 페이징 처리)

import axios from "axios";

import { useEffect, useState } from "react";

const Home = () => {

    const [data , setData] = useState([]); --> 가져올 데이터

    const [displayData , setDisplayData] = useState([]); --> 보여줄 데이터

    const [itemsPerPage , setItemsPerPage] = useState(10); --> 한페이지에 몇개를 보여줄 것인가

    const [currentPage , setCurrentPage ] = useState(1); -> 현재 페이지 넘버

    useEffect(()=>{

        axios.get("/board/")

        .then( res => {

            setData(res.data)

            setDisplayData(res.data.slice(0,itemsPerPage)); --> 가져온 데이터를 (0,10) 열개를 보여준다.

        })

        .catch(err => console.log(err));

    },[]);

    const buttons = ()=>{

        const totalPages = data.length; --> 데이터의 총길이

        const endPage = Math.ceil( totalPages / itemsPerPage ); --> 최대 몇페이지까지 페이징해야하기 위해서 구한식

        const pageButtons = [];

        for( let i = 0 ; i < endPage; i++){

            pageButtons.push( --> Js에서는 배열을 생성후 push를 통해서 추가가 가능하다.

            아래와 같은 버튼을 반복해서 생성

                <button key={i} onClick={()=>changePage(i+1)} disabled={currentPage === i+1}>

                    {i+1}

                </button>

            )

        }

        return(

            <div>

                {pageButtons}

            </div>

        );

    }

    const changePage = (pageNumber) => {

        setCurrentPage(pageNumber);

        const startIndex = (pageNumber-1) * itemsPerPage; --> 1페이지면 0~10까지, 2페이지면 10부터 ~ 20까지

        const endIndex = startIndex + itemsPerPage;

        setDisplayData(data.slice(startIndex,endIndex));

    }

    return(

        <div className="Home">

            {displayData.map((target,index)=>(

                <div key={index}>

                    번호 : {target.id} /

                    제목 : <a href={`/board/${target.id}`}>{target.boardTitle}</a> /

                    내용 : {target.boardContent} /

                    조회수 : {target.boardHits} /

                    작성일 : {new Date(target.boardCreatedTime).toLocaleDateString()}

                </div>

            ))}

            {buttons()}

        </div>

    );

}

export default Home;

 

항상 페이징 처리를 백엔드에서 구현하였기 때문에 이번에는 페이징 처리를 백엔드를 사용하지 않고 프론트 엔드로만 구현하고자 하였다. 장점으로써는 백엔드와 한번만 데이터를 주고 받아서 데이터 처리가 가능하다는점, 단점은 데이터의 양이 많으면 너무많은 데이터를 가져와야 되기 때문에 클라이언트 입장에서는 불편함을 겪을 수도 있다는 것이다.