230221 팀 프로젝트 11 페이지네이션

어제까지 진행했던 페이지네이션은 그대로 사용하면 게시글이 밑으로 붙어버리는 경우가 생기기 때문에....
로직을 보안했다.

페이지네이션

// 최소값, 최댓값 입력
const [minValue, setMinValue] = useState(0);
  const [maxValue, setMaxValue] = useState(12);
// 페이지 당 12개의 데이터를 보여주는 조건
  const handleChange = (count) => {
    setMinValue(page * 12 - 12);
    setMaxValue(page * 12);
  };
  
  return (
  	<>
    <CardList>
    //여기에서 DATA는 전체 카드리스트를 가르키는 것으로 나는 useState를 써서 값을 받아왔다.
          {DATA &&
            DATA.length > 0 &&
            DATA.slice(minValue, maxValue).map((item) => (
              <CardSection key={item.id} item={item} db={db} />
            ))}
        </CardList>
        
        //antd 디자인 pagination사용
         <Pagination
          defaultCurrent={1} // 페이지를 1페이지가 먼저 올 수 있도록 설정
          defaultPageSize={12} // 페이지에서 12개의 데이터가 보여짐
          onChange={handleChange}
          // 참고로 antd에서는 total값은 숫자를 지원함!
          total={DATA.length}
        />
        
    </>
  )

구현 결과

antd 페이지네이션 커스텀이 이렇게까지 골때릴 줄도 몰랐고 오래걸릴줄도 몰랐다...ㅋㅋ

왜냐면! 다들 antd에서 카드 컴포넌트와 함께... 가져와서 하지 따로 만든 것들을 이어서 사용하는 예시들을... 보여주지 않았기 때문이다...ㅂㄷㅂㄷㅂ두ㅜㅜㅜㅜㅜ

라이브러리 처음 써보는 것도 아닌데 이만큼 머리빠질만한 상황은 처음이었다...
9시까지 안되면 걍 만들러갑니다 이러고 있었는데 8시 45분에 컷했기 때문에... 그대로 사용한다ㅎㅎㅎ..ㅎ...ㅜ

결론 = ant 디자인을 라이브러리로써 사용한다면 꼭..꼭.. 예제들을 확인을 하자... 대머리 될 것같으니까...ㅜㅜ