[React] 페이지 이동바 / PaginationStrap

페이지를 넘길 때 사용하는 PaginationStrap

 

보여줘야 하는 목록 및 페이지가 많을 때 목록을 무한정 보이게 하는 것이 아닌

페이지를 설정해 넘길 수 있도록 사용하는 경우가 많은데,

이 때 페이지를 넘길 수 있는 페이지 이동바를 만들 때 사용하는 것이 PaginationStrap이다

 

 

[PaginaitionStrap.js]

import { Pagination, PaginationItem, PaginationLink } from "reactstrap";

function PaginationStrap(){
    return(
        <div>
            // (1)
            <Pagination size="lg">
                // (3)
                <PaginationItem disabled >
                    // (2)
                    <PaginationLink previous href="#"/>
                </PaginationItem>
                <PaginationItem>
                    <PaginationLink href="?page=1">1</PaginationLink>
                </PaginationItem>
                <PaginationItem>
                    <PaginationLink href="?page=2">2</PaginationLink>
                </PaginationItem>
                <PaginationItem>
                    <PaginationLink href="?page=3">3</PaginationLink>
                </PaginationItem>
                <PaginationItem>
                    <PaginationLink href="?page=4">4</PaginationLink>
                </PaginationItem>
                <PaginationItem>
                    <PaginationLink href="?page=5">5</PaginationLink>
                </PaginationItem>
                // (2)
                <PaginationItem>
                    <PaginationLink next href="#"/>
                </PaginationItem>
            </Pagination>
        </div>
    )
}

export default PaginationStrap;

(1) Pagination의 size 설정 : size="sm", "lg", "md"(기본) 으로 전체적인 크기 설정이 가능

(2) 페이지 이동바에는 앞 뒤로 이동할 수 있는 버튼이 존재하는데 이는 previous, next로서 표시 가능

(3) disabled : 페이지가 첫 페이지거나 마지막 페이지인 경우 클릭이 불가능하도록 설정하는 옵션 존재