React - Pagenation

 

페이징 처리할때 쓰는 놈

# 만약 페이지 네이션을 사용하게 될시
# 4) Material Page component 업그레이드 
# 과거 v4 -> v5 변경 설치
npm install @mui/material @emotion/react @emotion/styled

# 4-1) 소스에서 임포트 사용법 : <Pagination />
import Pagination from '@mui/material/Pagination';

 

써보지 뭐

일단 html 부터 보자

                    {/* 페이징 처리 */}
                    <Pagination
                      className="pagination"
                      count={count}
                      page={page}
                      siblingCount={1}
                      boundaryCount={1}
                      shape="rounded"
                      onChange={handlePageChange}
                      sx={{
                        color: "white", // 흰색 글자색
                        display: "flex",
                        justifyContent: "center",
                        marginTop: "20px", // 원하는 여백 설정
                        "& .Mui-selected": {
                          backgroundColor: "white", // 선택된 페이지의 배경색
                          color: "#1E1F22", // 선택된 페이지의 글자색
                          "&:hover": {
                            backgroundColor: "white", // 선택된 페이지의 호버 배경색
                          },
                        },
                        "& .MuiPaginationItem-root": {
                          fontSize: "1rem", // 페이지 아이템의 글자 크기
                          minWidth: "30px", // 페이지 아이템의 최소 너비
                          height: "30px", // 페이지 아이템의 높이
                          color: "white", // 선택되지 않은 페이지 아이템의 글자색
                          "&:hover": {
                            backgroundColor: "black", // 선택되지 않은 페이지 아이템의 호버 배경색
                          },
                          "&.Mui-selected": {
                            backgroundColor: "purple", // 특정 페이지일 때 선택된 페이지의 배경색
                            color: "white", // 특정 페이지일 때 선택된 페이지의 글자색
                            "&:hover": {
                              backgroundColor: "purple", // 특정 페이지일 때 선택된 페이지의 호버 배경색
                            },
                          },
                        },
                      }}
                    />

 

뭔가 길긴 한데

대충 다른건 필요없고

count , page , onChange 만 보면된다 (다른건 그냥 예쁘게 할려고..)

 

JavaScript

import Pagination from "@mui/material/Pagination";

  //  TODO  공통 변수(필수)  page(현재 페이지), count(총 페이지 건수) , pageSize(1페이지 당 건수)
  const [page, setPage] = useState<number>(1); // 현재 페이지 번호         최초값 1
  const [count, setCount] = useState<number>(1); //총페이지 건수          최초값 1
  const [pageSize, setPageSize] = useState<number>(10); //1페이지당 개수  최초값 20
  
    // TODO : Pagenation 수동 바인딩
  // TODO : 페이지 번호를 누르면 -> page 변수에 값 저장
  const handlePageChange = (event: any, value: number) => {
    // value == 화면의 페이지번호
    setPage2(value);
  };
  
    useEffect(() => {
    함수명();
  }, [page, pageSize]);

 

그럼 데이터를 받는 함수를 만들어 주기만 하면 될거다.