REACT_reactstrap Pagination

Pagination 사용하기

: 데이터 수가 많아 한 페이지에 모두 표시할 수 없을 때는 여러 페이지에 나눠 표시한다

Pagination 패키지는 번호, 이전/다음 페이지, 첫/마지막 페이지 버튼을 쉽게 구현할 수 있다

 

- R050_ReactstrapPagination.js

import { render } from '@testing-library/react';
import React, { Component } from 'react';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';

class R050_ReactstrapPagination extends Component {
    Pagination = (type) => {
        alert("Go " + type)
    }


render() {
    return(
        <>
        <Pagination size="Ig" aria-label="Page navigation example">
            <PaginationItem>
                <PaginationLink previous onClick={e => this.Pagination("previous")}/>
            </PaginationItem>
            <PaginationItem>
                <PaginationLink onClick={e => this.Pagination("1")}>1</PaginationLink>
            </PaginationItem>
            <PaginationItem>
                <PaginationLink onClick={e => this.Pagination("2")}>2</PaginationLink>
            </PaginationItem>
            <PaginationItem>
                <PaginationLink last onClick={e => this.Pagination("last")}/>
            </PaginationItem>
        </Pagination>
        </>
    )
}
}
export default R050_ReactstrapPagination;

 

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import Pagination from './R050_ReactstrapPagination'
import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <Pagination/>
    </div>
  );
}

export default App;

 

결과