board 수정1

수정 사항
페이지 네이션 1차 작업

import

import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { selectBoard } from "../../redux/slices/boardSlice";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";

페이지 네이션 구간

//페이지네이션
//페이지 네이션의 시작 하는 첫 숫자
const [currentPage, setCurrentPage] = useState(1);

//보여줄 데이터 개수
const itemsPerPage = 10;


const getItemsForPage = (page: number) => {

//보여줄 데이터의 첫 시작
const startIndex = (page - 1) * itemsPerPage;

//보여줄 데이터의 끝
const endIndex = startIndex + itemsPerPage;

//총 데이터에서 첫시작과 끝 시작을 파라미터로 받는다
//첫 시작 데이터 포함 끝 시작 데이터 제외 하고 새로운 배열 반환
return Object.values(boardItemState).slice(startIndex, endIndex);
  };
  
//getItemsForPage 함수 실행 currentPage를 파라미터로 받고
[currentPage]가 변경 될 때 마다 재 렌더링
useEffect(() => {
    const itemList = getItemsForPage(currentPage);
  }, [currentPage]);


const handlerenderPagenation = () => {
//ceil로 총 데이터 길이/보여줄 데이터 로 나온 값 정수로
//ex : 569/10 =56.9를 정수로 올림 57
    const totalPages = Math.ceil(
      Object.values(boardItemState).length / itemsPerPage
    );
    
    //빈 배열 이유는 페이지 네이션의 숫자를 담기 위해
    const paginationNumberGroup = [];
    
    //반복문 돌면서 숫자를 배열에 담는다
    for (let i = 1; i < totalPages; i++) {
      paginationNumberGroup.push(
        <li key={i} onClick={() => setCurrentPage(i)}>
          {i}
        </li>
      );
    }
    return paginationNumberGroup;
  };



 //해당 페이지가 1번이라면 1번의 데이터를 map을 돌려서 데이터 반환
 //현재 데이터가 중첩 배열임
 {getItemsForPage(currentPage).map((items: any, index) =>
  items.map((item: any, innerIndex: number) => {
  const isModifiedData = boardItemMoState[item.did];
  return (
      <li
        key={innerIndex}
        onClick={() => handleItemClick(item.did)}
      >
        <Link to={`/page/${item.did}`}>
          <div className="link_map">
            <div>{item.did}</div>
            {item.title}
            <div>{formatDate(item.timedata)}</div>
          </div>
        </Link>
      </li>
    );
  })
)}              


//페이지 네이션의 숫자가 보여짐
<ul className="pagination">
  <li
    onClick={() => {
      setCurrentPage(currentPage - 1);
      console.log(`${currentPage}`);
    }}
  >
    이전
  </li>
  {handlerenderPagenation()}
  <li
    onClick={() => {
      setCurrentPage(currentPage + 1);
      console.log(`${currentPage}`);
    }}
  >
    다음
  </li>
</ul>