[React] 페이지네이션

투두리스트 - 로컬스토리지 할 수 있게끔 공부하기 

 

 

----------------------------------------------------------------------------------

1. 리액트 프로젝트 생성

npx create-react-app react-pagination-practice

 

2.vscode 

App.js 클래스형으로 변경

App.js

import './App.css';
import { Component } from 'react';

class App extends Component{
  constructor(props){
    super(props)
    this.state={

    }
  }
  render(){
    return(
      <div id='App'>

      </div>
    )
  }
}
export default App;

 

App.css 기본틀 생성

App.css

*{
  margin: 0;
  padding: 0;
}

ul{
  list-style-type: none;
}

a{
  text-decoration: none;
}

#App{
  width: 1200px;
  height: 700px;
  background-color: olive;
  margin: 0 auto;
}

 

components 폴더에 Pagination.js , PostList.js 만들기 

마찬가지로 css 폴더에도 Pagination.css , PostList.css 만들기 

 

components 에 있는 js 파일도 클래스형으로 만들기 

PostList.js

import '../css/PostList.css';
import { Component } from 'react';

class PostList extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }
    render(){
        return(
            <div id='post-list'>

            </div>
        )
    }
}

export default PostList;

 

#post-list{
    width: 90%;
    height: 600px;
    background-color: beige;
    margin: 0 auto;
}

 

Pagination.js

Pagination.js

import '../css/Pagination.css';
import { Component } from 'react';

class Pagination extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }
    render(){
        return(
            <div id='pagination'>
                
            </div>
        )
    }
}

export default Pagination;

#pagination{
    width: 90%;
    height: 100px;
    background-color: indianred;
    margin: 0 auto;
}

App.js 에 임포트하고 화면 확인하기 

  render(){
    return(
      <div id='App'>
        <PostList/>
        <Pagination/>
      </div>
    )
  }

 

3. App.js 상태값 만들어주기  (원래는 데이터베이스에 있어야 하는 정보들

class App extends Component{
  constructor(props){
    super(props)
    this.state={
      postlist:[ //게시글 목록
        {no:10, title:'title-10' },
        {no:9, title:'title-9' },
        {no:8, title:'title-8' },
        {no:7, title:'title-7' },
        {no:6, title:'title-6' },
        {no:5, title:'title-5' },
        {no:4, title:'title-4' },
        {no:3, title:'title-3' },
        {no:2, title:'title-2' },
        {no:1, title:'title-1' }
      ]
    }
  }

4.post.js 함수형으로 만들기  

   (Postlist.js 는 App.js 에 props로 받은 정보를 화면을 뿌려줌 )

   (Post.js 는 Postlist.js 로 정리된 화면 보내줌)

음... Post -> Postlist -> App   회사조직으로 생각하기  

Post.js

//수정과 같이 CRUD 기능이 필요없기 때문에 상태값이 필요가 없다. 
//그래서 클래스형말고 함수형으로 써도됨

function Post(props){
    return(
        <div id='post'>
            <span>{props.no}</span>
            <span>{props.title}</span>
        </div>
    )
}

export default Post;

 

 

5. 데이터는 App.js 에 있기 때문에 App.js에서  postlist 에 주입시켜줘야함.

App.js

render(){
    const {postlist} = this.state
    //비구조할당
    return(
      <div id='App'>
        <PostList postlist={postlist}/>
        <Pagination/>
      </div>
    )
  }

PostList.js 에서 Post.js 임포트하고 

App.js의 데이터베이스값 넣어주기

import '../css/PostList.css';
import { Component } from 'react';
import Post from './Post';

class PostList extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }
    render(){
        const result = this.props.postlist.map(
            (data)=>(<Post key={data.no}
                no={data.no} title={data.title}/>)
        )
        return(
            <div id='post-list'>
                {result}
            </div>
        )
    }
}
export default PostList;

화면에 출력된거 확인하면 Post.css 도 만들어서 스타일주기 

#post{
    width: 90%;
    height: 50px;
    background-color: sandybrown;
    margin-bottom: 2px;
}
#post>span{
    float:left;
    text-align: center;
}
#post>span:first-child{
    width: 5%;
    height: 100%;
    background-color: firebrick;
}
#post>span:nth-child(2){
    width: 30%;
    height: 100%;
    background-color: grey;
}

6. 화면 하단에 페이지 번호 버튼 만들어주기 

**게시글 갯수는 정해진게 아니라 항상 바뀌기 때문에 페이지번호 갱신작업을 해줘야할 배열을 생성해주고 for문을 돌려줘야함

for문 작성을 위해 게시글의 데이터가 담긴 App.js 상태값의 postlist 배열값을 받아오기 

App.js

  render(){
    return(
      <div id='App'>
        <PostList postlist={this.state.postlist}/>
        <Pagination total={this.state.postlist.length}/>
      </div>
    )
  }

total로 배열값 보내기

 

Pagination.js로 total (postlist.length)값 콘솔 찍어보기 

Pagination.js

    render(){
        const{total} = this.props

        console.log('total : '+total);

        return(
            <div id='pagination'>
            </div>
        )
    }

 

App.js 상태값에 저장된 게시글 갯수

** 페이지당 화면에 뜰 갯수 정해주기 

App.js 상태값에 postPerPage 상태값 만들어주기 

App.js

class App extends Component{
  constructor(props){
    super(props)
    this.state={
      postlist:[ //게시글 목록
        {no:10, title:'title-10', writer:'kim', writeDate:'2023-06-10' },
        {no:9, title:'title-9', writer:'kim', writeDate:'2023-06-08' },
        {no:8, title:'title-8', writer:'kim', writeDate:'2023-03-10' },
        {no:7, title:'title-7', writer:'kim', writeDate:'2023-03-01' },
        {no:6, title:'title-6', writer:'kim', writeDate:'2023-02-10' },
        {no:5, title:'title-5', writer:'kim', writeDate:'2023-02-02' },
        {no:4, title:'title-4', writer:'kim', writeDate:'2023-01-30' },
        {no:3, title:'title-3', writer:'kim', writeDate:'2023-01-25' },
        {no:2, title:'title-2', writer:'kim', writeDate:'2023-01-14' },
        {no:1, title:'title-1', writer:'kim', writeDate:'2023-01-04' }
      ],
      postPerPage : 3 ,//페이지당 개수
    }
  }

그리고 Pagination에 postPerPage 상태값 알려주기 

App.js 

  render(){
    return(
      <div id='App'>
        <PostList postlist={this.state.postlist}/>
        <Pagination total={this.state.postlist.length}
                    postPerPage={this.state.postPerPage}/>
      </div>
    )
  }
}

Pagination.js 로 postPerPage 값 잘 넘어오나 콘솔 찍어보기 

Pagination.js

    render(){
        const{total} = this.props

        console.log('total : '+total);
        console.log('postPerPage : ' + this.props.postPerPage)

        return(
            <div id='pagination'>
            </div>
        )
    }
}

전체 게시글과 페이지당 갯수를 받아왔으면

전체페이지 / 페이지당 게시글 수 

나눠서 페이지 버튼 갯수 담는 변수 만들어주기 

>> 그런데 total/postPerPage 하면 자바스크립트에서는 3.333333~ 이 나온다. 

Pagination.js
        const endPage = this.props.total/this.props.postPerPage
        console.log(endPage)

페이지갯수는 정수이기 때문에 실수를 정수로 나오게 해줘야한다. 

여기서 Math.ceil() 로 소숫점을 올려준다. 

Pagination.js
        const endPage = Math.ceil(this.props.total/this.props.postPerPage)
        console.log(endPage)

*****이제 for문으로 번호 하나씩 넣어주기 

페이지번호 넣어줄 배열 생성해주기 pageNumbers=[];

그리고 for문으로 페이지번호 하나씩 배열에 넣어주기 

***페이지는 1부터 시작하기 때문에 for문에 i=1 로 해줘야함 

Pagination.js

        let pageNumbers=[]
        for(var i=1; i<=endPage; i++){
            pageNumbers.push(i)
        }
        console.log(pageNumbers)

콘솔에 배열 확인되면 화면에 페이지번호 출력해주기 

 

왜 map() 을 쓰지 ....

> span 으로 찍어주려고 그런듯.. 

 

 

 

 

 

페이지누르면 현재페이지 상태 바뀌고 페이지당 게시글갯수까지 화면에 나타나게 까지 완료됨. 

이전,다음 버튼 추가 

페이지에 호버, 하이라이트 추가 

게시글 항목추가 (글쓴이, 글쓴날짜)

헤더 추가 (번호, 제목, 글쓴이, 글쓴날짜)

 

..여기에 api서버에서 받아온 데이터나 db에서 넘어온 데이터 쓴다거나 하면 조금 더 응용되고

페이지이동 , CRUD, DB연동도 추가되고 이러면 게시판이 됨 .

 

index.js 스트릭트모드때문에 콘솔이 두번찍힘 

없애면 한번찍힘 (헷갈려서 지우는게 보기편함)