TIL - 0901 페이지네이션 라이브러리 사용하기1

9월이라니..! 2021년이 시작한게 엊그제 같은데!

9월의 시작은 페이지네이션과 함께 하였다.

사실 무한 스크롤을 구현하다가 생각처럼 잘 안되어서 페이징 처리로 바꾸었다. (그래봤자 원리는 비슷할테지만🤔)

 

페이지네이션 라이브러리를 사용해 프론트에서 페이징 처리를 해주는 작업을하였다.

앤트디자인 페이지네이션을 사용하였고, api설명이 잘되어있어서 사용하는데 비교적 쉬운편이다. (???)

<Paging
  defaultCurrent={1} // 초기 페이지는 1로 지정
  pageSize={10} // 한 페이지 당 10개씩 보여준다.
  total={total} // 총 데이터 양
  onChange={pagingFunction} // 페이지가 변할때마다 실행 함수
 />

 

api통신 후 가져온 데이터를 tempList에 담고, total은 tempList의 길이로 정해주었다.

그리고 또 tempList를 10개로 잘라 temp에 담아주고 tempList를 dataSend로 넣어준다.

const getList1 = () => {
        setActivate(1)
        postActions.getWarning().then((res) => {
            if(res.data.ok){
                let tempList = res.data.response;
                setTotal(tempList.length); 
                console.log(tempList);
                setTemp(tempList.slice(0,10));
                dataSend(tempList);
            } else {
                throw res.data.response
            }
        })
        .catch((err) => {
            console.log(err);
        })
    }

dataSend함수는 10개의 값으로만 이루어진 1차원 배열을 10개의 배열이 tempList length/10 개가 들어간 2차원 배열로 만들어 주는 함수이다.

const dataSend = (value) => {
        let temp = [];
        let tempRes = [];

        for(let i in value){
            tempRes.push(value[i]) // value의 i번째 값을 tempRes로 넣어준다.
            if(i % 10 === 9 || (value.length - 1 === parseInt(i, 10))){
            	// tempRes가 10개가 되면 temp로 넣어주는 작업
            	// i를 10으로 나눈 나머지가 9이거나 => 9번째 숫자(9, 19, 29 ...)를 10으로 나눴을때 나머지각 9이다.
                // value.length - 1 === parseInt(i, 10) => 맨 마지막 숫자 처리(9번째가 아닐때)
                temp.push(tempRes)
                tempRes = [] // 새로운 빈 tempRes생성
            }
        }
        console.log(temp);
        setResult(temp);

    }

위와 동일하게 동작하지만 2중 for문을 이용한 조금 더 단순한 방법

        for (let j = 0; j < response2.length/10; j++){
            
            tempRes = temp.length == 0? response2 : tempRes.slice(10);
            let temp2 = [];

            for (let i = 0; i < tempRes.length; i++){
                temp2.push(tempRes[i])
                if (temp2.length == 10) break;
            }
            temp.push(temp2);
            
        }

이제 페이지가 바뀔때마다 pagingFunction을 실행시켜주는데,

const pagingFunction = (page, size) => {
        setCurrentIndex(page);
    }

라이브러리 api에서 받는 파라미터인 page는 페이지 번호의 값이다. => 3페이지를 선택하면 page에 3이들어가며 페이지 이동이 된다.

그 page값을 내가 만들어둔 currentIndex에 넣어준다.

 

마지막으로 페이지가 바뀔때마다 보여주는 데이터도 변해야한다.

useEffect(() => {
  console.log(result)
  setTemp(result.length > 0 ? result[currentIndex - 1] : [])

}, [currentIndex]);

 (currentIndex가 변할때마다 실행) dataSend함수에서 10개씩 끊어 2차원 배열로 담아 준 result의 길이가 0보다 크다면 result 인덱스 값 [페이지번호-1]을 temp에 담아준다. 

최종적으로 temp를 map돌려서 화면에 뿌려주고있으므로 temp까지 잘 불러오는 것을 확인하면 페이징처리 완료!