💡 Pagination
게시글을 수가 많아지면 스크롤이 길어지니까 목록으로 만들고 싶었는데 구글링해보니까 그걸 Pagination이라고 하는걸 알게 되었다.
-
Pagination 참고 사이트
🏴 https://www.daleseo.com/react-pagination/
🏴 https://velog.io/@ahsy92/React-Pagination-구현하기 -
Pagination 라이브러리
🏴 공홈: https://www.npmjs.com/package/react-js-pagination
검색한 결과로 나온 여러 방법들을 적용해봤는데 쉽지 않았다. 그래서 라이브러리를 사용하기로 했다. Pagination Library를 이용한 목록 구현👈 블로그를 참고하여 react-js-pagination를 설치한 다음 목록을 구현해보았다. 다양한 파라미터를 사용해보고싶다면 공식 홈페이지를 방문해서 살펴보면 도움이 될 것 같다.
import React, { useEffect, useState } from 'react';
import PageList from './PageList';
import Pagination from "react-js-pagination";
export default function AllBoards({boards}) {
const [page, setPage] = useState(1);
const limit = 10;
const [currentPost, setCurrentPost] = useState(boards)
const indexOfLastPost = page * limit
const indexOfFirstPost = indexOfLastPost - limit;
useEffect(() => {
setCurrentPost(boards.slice(indexOfFirstPost, indexOfLastPost))
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [boards, page])
return (
<section className='h-96'>
{currentPost && <ul className='h-full'>
{currentPost && currentPost.map((board, index) => <PageList key={board.id} index={index} board={board}/>)}
</ul>}
<section className='mt-48'>
<Pagination
activePage={page}
itemsCountPerPage={10}
totalItemsCount={boards?.length}
pageRangeDisplayed={5}
onChange={(page) => setPage(page)}
/>
</section>
</section>
);
}
게시글은 10개씩 끊어서 목록으로 만들고 페이지 수는 5단위로 끊었다. 의도한 대로 목록 형식으로 게시글들은 보여졌지만 게시글 번호에 문제가 발생했다. 다음 페이지로 넘어가면 게시글 번호가 이어지는게 아니라 1부터 리셋됐다. 무슨 이유인지는 모르겠지만 itemsCountPerPage가 적용이 되지 않아서 데이터를 10개씩 잘라서 보여주도록 했더니 다음 페이지로
넘어가면 index가 다시 1부터 시작돼서 게시글 번호를 순서대로 보여줄 수 없었다. 10개씩 자르지 않으면 게시물 번호를 정상적으로 보여줄 수 있지만 그럼 Pagination을 한 의미가 없어진다ㅠㅠ
const [page, setPage] = useState(1);
const limit = 10;
const [currentPost, setCurrentPost] = useState(boards)
const indexOfLastPost = page * limit
const indexOfFirstPost = indexOfLastPost - limit;그래서 정말 오래걸렸지만 야매(?)로 일단 해결은 했다. 직접 번호를 매겨서 저장한다음에 화면에 보여주는 것이다!! 우선 배열의 제일 최근 게시물의 listNumber를 구했다.
const {boardsQuery: {data:boards}} = useBoards()
const order = boards?.length - boards?.length
const number = boards[order].listNumber;const docRef = await addDoc(collection(database, "board"), {
title:title,
writer:`${userName.slice(0,1)}**`,
content: content,
date:getClock(),
image:url ? url : null,
modify:false,
boardId: user.uid,
listNumber: number+1, //👈
timestamp:Timestamp.now()
})
return docRef;그런 다음에 listNumber에 1씩 더해서 게시글을 작성할 때 함께 전달하도록 했다. 이렇게 했더니 원했던대로 게시물 목록에 번호를 매길 수 있었다.
머리가 안돌아가는 건지 내가 이해를 못하는 건지 모르겠다. 분명히 방법이 있을텐데ㅠ 일단 완성은 해야하니까 그래도 야매로라도 해결을 할 수 있어서 너무 뿌듯하다ㅎㅎ
