React hooks로 페이지네이션(pagination)

1) useState 설정

const [Products, setProducts] = useState([])
const [loading, setloading] = useState(false)
const [currentPage, setcurrentPage] = useState(1)
const [productsPerPage, setproductsPerPage] = useState(10)

 

2) useEffect에서 데이터 불러오기

useEffect(() => {
        setloading(true);
        let body={category:'인생뷰티'}
        Axios.post('/api/product/lists', body)
        .then(response=>{
            if(response.data.success){
                setProducts(response.data.products)
                setloading(false)
            }
        })
    }, [])

loading =true   =>   axios에서 데이터 전체 불러오기   =>   loading = false

 

3) 전체 item을 FirstProduct와 lastProduct index로 slice

//Get Current Products
const indexOfLastProduct = currentPage*productsPerPage;
const indexOfFirstProduct = indexOfLastProduct-productsPerPage;
const currentProduct=Products.slice(indexOfFirstProduct, indexOfLastProduct)

const productBox=currentProduct.map((product, index)=>{
    return(
        <ProdList product={product} loading={loading} />
    )
})

전체 item을 FirstProduct와 lastProduct index로 slice 한다.

( 예) 1페이지 : 1~10 / 2페이지 : 11~20 / .... )

 

4) slice한 item에 mapping => name, image 등 설정

5) 페이지네이션 설정

<Pagination onChange={(page)=>{setcurrentPage(page)}} defaultCurrent={1} total={Products.length} defaultPageSize={productsPerPage}/>

-currentPage state

=> 클릭한 page setting

=> currentPage state가 변동되면서 slice 인자들이 변동된다.

=> 페이지수에 따라 slice된 item들이 보이게 된다.

 

6) loading

{loading ? (
    <div style={{width:'100%', textAlign:'center', padding:'50px 0'}}>Loading...</div>
)
: (
    <div className="prodList">
        {productBox}
    </div>
)}

 

 

참고사이트

medium.com/@loshy244110/react-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%84%A4%EC%9D%B4%EC%85%98-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-9c645c5046cd