[react] 게시판 조회 및 Page 처리 - 라이브러리 사용 X

react pagination 라이브러리를 사용 하지 않고 규현한 소스다

 

오타가 있을수도 있다...ㅠ

 

- Spring

https://daeseok94.tistory.com/59

[Spring] API로 페이징 처리 Pageable

 

 

import React, {useState, useEffect} from 'react';
import axios from 'axios';

function NoticeList() {

	const [page, setPage] = useState(0); // 페이지 변경 시 게시판 조회
    
    const [notices, setNotice] = useState(null); // 게시판 내용
    const [loading, setLoadin] = useState(false); 
    const [error, setError] = useState(null);
    
    const [totPage, setTotPage] = useState(null); // 총 페이지
    
    //이전페이지 버튼 누를때 
    const previouis = (event) =>
    {
    	if(page == 0) 
        {
        	window.alret("최초 페이지입니다.")
        }
        else
        {
        	setPage(page -1);
        }
    };
    
    //이후 페이지 버튼 누를때
    const next = (event) =>
    {
    	if(page + 1 == totPage)
        {
        	window.alret("마지막 페이지입니다.")
        }
        else
        {
        	setPage(page + 1);
        }
    };
    
    //페이지버튼 세팅 (< 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 >)
    const pageSetting = () =>
    {
    	const result = [];
        
        if(page < 5) //페이지 0,1,2,3,4 페이지일 경우 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 고정
        {
        	for (let i = 0; i< 10; i++)
            {
            	if(i == totPage) // 해당 끝 페이지일 경우 for문 멈춤
                {
                	break;
                }
                else
                {
                	if(i == page) // 현재페이지일 경우 이벤트 제외 글씨 굵게
                    {
                    	result.push(<li class="page-item"><a class="page-link"><b> {i +1}</b></a></li>);
                    }
                    else
                    {
                    	result.push(<li class="page-item"><a class="page-link" href = "#" onClick = {(event) => setPage(event.target.innerText-1)}> {i +1} </a></li>);
                    }
                }
            }
        }
        else
        {
        	for (let i = page -5; i<page +5 ; i++)
            {
            	if(i < 0)
                {
                	continue;
                }
                
                if(i == totPage) // 해당 끝 페이지일 경우 for문 멈춤
                {
                	break;
                }
                else
                {
                	if(i == page)
            		{
            			result.push(<li class="page-item"><a class="page-link"><b> {i +1}</b></a></li>);
            		}
            		else
            		{
            			result.push(<li class="page-item"><a class="page-link" href = "#" onClick = {(event) => setPage(event.target.innerText-1)}> {i +1} </a></li>);
            		}
                }
            }
        }
        return result;
    };
    
    useEffect(() => {
    	const fetch = async () => {
        	try{
            	//요청이 시작 할 때에는 error 와 notice 초기화
            	setError(null);
                setNotice(null);
                
                //loading 상태를 true로 바꿉니다.
                setLoading(true);
                
                const responseNoticeList = await axios.get(
                	'http://localhost:9090/adminKisline/notice/noticeSelect?page=' + page + '&size=' + 10 );
                
                setNotice(responseNoticeList.date);
                setTotPage(responseNoticeList.data.totalPages); // 총 페이지수 받기
                
                } catch (e) {
                	setError(e);
                    console.log(e);
                }
                setLoading(false);
           	};
            
            fetch();
        }, [page]); // 현재 페이지가 변하면 API 호출
        
        if (loading) return <div> 로딩중...</div>;
        if (error) return <div> API 호출 에러가 발생했습니다 </div>;
        if (!notices) return null;
        
        return ( 
        	... 생략
            
            <tbody>
              {notices.content.map(notice => (
              <tr>
              	<th scope = "row"><a href ="#"> {notice.id}</a></th>
                
                ... 생략
              </tr>
            </tbody>
              ))}
          	... 생략
            {/* < 버튼 */}
            <li class= "page-item">
              <a class= "page-link" href="#" aria-label = "Previous" onClick = {(event) => previous(event)}>
            </li>
            
            {pageSetting() // 페이지}
            
            <li class= "page-item">
              <a class= "page-link" href="#" aria-label = "Next" onClick = {(event) => next(event)}>
            </li>
            {/* > 버튼 */}
            
        );
    
}
export default NoticeList;