개발자.. 너란놈..

기존 JavaScript로 된 페이징 버전 함수는 만들어두어서 그대로 사용하면 되는데 React 버전은 따로 만들어 둔게 없어서 아래와 같이 컴포넌트로 만들었습니다.

부모 컴포넌트

const [fileList, setFileList] = useState([]) //전체 리스트 데이터
const [onPageChange, setOnPageChange] = useState(1) //현재 페이징 번호
const [onDataPerPage, setOnDataPerPage] = useState(1) //페이지 별 보여지는 리스트 수
const [pageList, setPageList] = useState([]) //현재 페이징에 보여져야 될 리스트

//현재 Page에 맞는 리스트가 보여지게 끔 세팅
const handlePageView = () => {        
    const indexOfLastData = onPageChange * onDataPerPage;
    const indexOfFirstData = indexOfLastData - onDataPerPage;
    const currentData = fileList.slice(indexOfFirstData, indexOfLastData);

    setPageList(currentData);
}

//파일 리스트 최초 검색, 페이징 변경 되면 세팅 시기기
useEffect(() => {
    handlePageView()
}, [fileList,onPageChange])

return (
	<>
    	<Pagination totalData={fileList ? fileList.length : 0} dataPerPage={onDataPerPage} pageCount={5} currentPage={onPageChange} onPageChange={setOnPageChange}/>
    </>
)

자식 컴포넌트

mostback : '<<'

left : '<'

right : '>'

mostfront : '>>'

function pagination ({totalData,dataPerPage,pageCount,currentPage,onPageChange}){
    const [pagination, setPagination] = useState({
        firstPage: 1,
        lastPage: 1,
        nextPage: 1,
        prevPage: 1,
    });

    useEffect(() => {
        handlePaging(totalData, dataPerPage, pageCount, currentPage);
    }, [totalData, dataPerPage, pageCount, currentPage]);

    const handlePaging = (totalData, dataPerPage, pageCount, currentPage) => {
        let totalPage = Math.ceil(totalData / dataPerPage); // 총 페이지 수
        let pageGroup = Math.ceil(currentPage / pageCount); // 페이지 그룹

        let lastPage = pageGroup * pageCount; // 화면에 보여질 마지막 페이지 번호
        if (lastPage > totalPage) lastPage = totalPage;

        let firstPage = lastPage - (pageCount - 1); // 화면에 보여질 첫 번째 페이지 번호
        if (firstPage < 1) firstPage = 1;

        let prevPage;
        if (currentPage - 1 < 1) {
            prevPage = 1;
        } else {
            prevPage = currentPage - 1;
        }

        let nextPage;
        if (lastPage <= totalPage) {
            if((currentPage + 1) > totalPage){
                nextPage = lastPage;
            }else{
                nextPage = currentPage + 1;
            }
        } else {
            nextPage = lastPage;
        }

        setPagination({ firstPage, lastPage, nextPage, prevPage });
    };

    const handleClick = (page) => {
        if (onPageChange) {
            onPageChange(page);
        }
    };

    const { firstPage, lastPage, nextPage, prevPage } = pagination;

    return (
        <div className="pagination">
            <span className="first_btn" onClick={() => handleClick(1)}>
                <img src={mostback} alt="First" />
            </span>
            <span className="prev_btn" onClick={() => handleClick(prevPage)}>
                <img src={left} alt="Previous" />
            </span>

            {/* 페이지 번호들 */}
            {[...Array(lastPage - firstPage + 1).keys()].map((i) => (
                <span
                    key={i + firstPage}
                    className={currentPage === i + firstPage ? "current" : ""}
                    onClick={() => handleClick(i + firstPage)}
                >
                    {i + firstPage}
                </span>
            ))}

            <span className="next_btn" onClick={() => handleClick(nextPage)}>
                <img src={right} alt="Next" />
            </span>
            <span
                className="last_btn"
                onClick={() => handleClick(Math.ceil(totalData / dataPerPage))}
            >
                <img src={mostfront} alt="Last" />
            </span>
        </div>
    );
};

export default pagination;

안녕하세요 javascirpt를 사용하면서 페이징을 사용해야 되는 경우가 있는데 이런 경우에 아래와 같이 사용하면 바로 페이지를 적용 할 수 있습니다.

//totalData = 총 데이터 count
//dataPerPage = 한페이지에 나타낼 데이터 수
//pageCount = 한화면에 나타낼 페이지 수
//currentPage = 선택한 페이지
function fnPaging(totalData, dataPerPage, pageCount, currentPage) {
    let totalPage = Math.ceil(totalData / dataPerPage); // 총 페이지 수
    let pageGroup = Math.ceil(currentPage / pageCount); // 페이지 그룹
    if (pageCount > totalPage) pageCount = totalPage;
    let last = pageGroup * pageCount; // 화면에 보여질 마지막 페이지 번호
    if (last > totalPage) last = totalPage;
    let first = last - (pageCount - 1); // 화면에 보여질 첫번째 페이지 번호
    let next = last + 1;
    let prev = first - 1;

    let prevPage;
    let nextPage;
    if (currentPage - 1 < 1) {
        prevPage = 1;
    } else {
        prevPage = currentPage - 1;
    }
    if (last <= totalPage) {
        if((currentPage + 1) > totalPage){
            nextPage = last;
        }else{
            nextPage = currentPage + 1;
        }
    } else {
        nextPage = last;
    }
    
    /**                 페이징을 아래서 만들면 됩니다. (InnerHTML 사용)            **/
}

버튼을 클릭 시 데이터를 가져와서 뿌려주고, 파라미터에 맞춰서 데이터를 보여준다면 페이지를 쉽게 할 수 있습니다.