React_페이지 처리하기

export const usePaging = ({ totalCount = 0 }) => {
    const [page, setPage] = useState(0);
    const [rowsPerPage, setRowsPerPage] = useState(10);
    const [totalPage, setTotalPage] = useState(0);

이 함수는 totalCount라는 매개변수를 받는다.

page: 현재 페이지를 나타내는 상태
rowsPerPage: 페이지당 행 수를 나타내는 상태
totalPage: 전체 페이지 수를 나타내는 상태

const handleChangePage = (page) => {
    setPage(page);
};

handleChangePage: 페이지 변경을 처리하는 함수

이 함수는 주어진 페이지로 현재 페이지를 업데이트한다.

const handleClickFirstPage = () => {
    setPage(1);
};

handleClickFirstPage: 첫 페이지로 이동하는 함수

이 함수는 현재 페이지를 1로 설정하여 첫 페이지로 이동

const handleClickPrevPage = () => {
    const prevPage = page < 2 ? 1 : page - 1;
    setPage(prevPage);
};

handleClickPrevPage: 이전 페이지로 이동하는 함수

현재 페이지가 1보다 작으면 첫 페이지로 설정하고,
그렇지 않으면 이전 페이지로 이동

즉, 이 함수는 현재 페이지가 2보다 작을 때는 첫 번째 페이지로 이동하고,
그렇지 않으면 이전 페이지로 이동하는 동작을 수행

const handleClickNextPage = () => {
    const nextPage = page + 1 < totalPage ? page + 1 : totalPage;
    setPage(nextPage);
};

handleClickNextPage: 다음 페이지로 이동하는 함수

현재 페이지가 마지막 페이지보다 작으면 다음 페이지로 이동하고,
그렇지 않으면 마지막 페이지로 설정

const handleClickLastPage = () => {
    const lastPage = totalPage ?? 1;
    setPage(lastPage);
};

마지막 페이지 번호를 결정하는 부분

totalPage 변수가 존재하면 그 값을 lastPage에 할당하고,
존재하지 않으면 기본값으로 1을 할당한다.
이는 JavaScript의 null 병합 연산자 (??)를 사용하여 구현한 것

const handleChangeRowsPerPage = ({ rows = 0 }) => {
    if (!rows) {
        return;
    }
    setRowsPerPage(rows);
};

handleChangeRowsPerPage: 페이지당 행 수 변경을 처리하는 함수

함수의 매개변수로 객체를 받는다.
이 객체는 rows라는 속성을 포함할 수 있다.
이 때, rows의 기본값은 0으로 설정된다.

useEffect(() => {
    const totalPage = Math.ceil(totalCount / rowsPerPage);
    setTotalPage(totalPage);
}, [rowsPerPage, totalCount]);

rowsPerPage와 totalCount가 변경될 때마다 실행될 부수 효과를 정의
전체 페이지 수를 다시 계산하고 totalPage 상태를 업데이트

Math.ceil() 함수는
매개변수로 받은 숫자를 올림한 결과를 반환하는 JavaScript의 내장 함수

Math.ceil(totalCount / rowsPerPage)는
전체 항목 수를 페이지당 표시할 항목 수로 나눈 후 올림한 결과를 반환

return {
    handleChangePage,
    handleClickFirstPage,
    handleClickPrevPage,
    handleClickNextPage,
    handleClickLastPage,
    handleChangeRowsPerPage,
    page,
    rowsPerPage
};

};
정의된 상태와 함수들을 반환한다.
페이징 로직을 사용하는 다른 컴포넌트에서 사용

실제로 적용할 파일에서 훅 사용하기

const { page, rowsPerPage, handleChangeRowsPerPage } = usePaging({ totalCount: accessList?.totalCount });

totalCount를 매개변수로 받는다.
여기서 accessList?.totalCount는 accessList 객체가 존재하면
해당 객체의 totalCount 속성을 참조하고,
그렇지 않으면 undefined를 반환하게된다.

따라서 이 코드는 페이징과 관련된 상태와 함수를
page, rowsPerPage, handleChangeRowsPerPage라는
변수에 할당하여 사용할 수 있도록 준비한다.

이렇게 함으로써 페이지와 관련된 상태 및 함수를 효율적으로 사용할 수 있게 되며,
이를 통해 페이징 기능을 구현하고 상태를 관리할 수 있다.

   const handleChangeRows = (e) => {
        const value = e?.target?.value;
        handleChangeRowsPerPage({ rows: value });
    };

이 함수는 사용자가 페이지당 행 수를 변경하는 입력 필드에서 값을 입력할 때마다 호출되어, 해당 값을 페이지당 행 수로 설정하는 역할