[20240601] 페이지네이션 구현

[aranlll]

페이지 네이션 구현

드디어 미루고 미루던 페이지 구현 코드를 6월 1일인 김에 ~ 바아로 해결해보았쌈니다

(사실 어제부터 계속 했었는데 ... 자꾸 먼가 오류가 났던 이슈 ... )

결국 라이브러리 설치했습니다ㅜ...

npm install react-js-pagination

yarn add react-js-pagination

이코드를 터미널에 입력해서 라이브러리 야무디게 깔구 성공햇습니닷 !!!

구현 화면

추가코드

  const navigate = useNavigate();

  const [page, setPage] = useState(1);
  const [items, setItems] = useState(2);
  const handlePageChange = (page) => {
    setPage(page);
  };
  const itemChange = (e) => {
    setItems(Number(e.target.value));
  };

 {userInformation
          .slice(items * (page - 1), items * (page - 1) + items)
          .map((a, i) => {
            return (
              <div>
                <div className="line1" />
                <div className="userdata">
                  <div className="bar">
                    <div className="title">{a.title}</div>
                    <div className="writetime">Price:{a.price}</div>
                  </div>
                  <div className="noticeContent">{a.content}</div>
                  <br />
                  <br />
                  <br />
                </div>
              </div>
            );
          })}
        <>
          <Pagination
            className="pagination"
            activePage={page}
            itemsCountPerPage={items}
            totalItemsCount={userInformation.length}
            pageRangeDisplayed={5}
            onChange={handlePageChange}
          ></Pagination>

우하하 행복하군요 이제 진짜 로그인 구현이랑 연동만 하면 끝입니댜 !!! 일주일 안에 할 수 있겠죠 ..?