[React 기초] 라이브러리 없이 Pagination 구현

엄청난 삽질을 많이했던, Pagination 작업을..마무리하며 일기 겸 구현한 페이지를 보기로 한다...ㅠ...

 

완성의 모습이 보이는 귀여운 나의 자유게시판

 

기초적으로 먼저 Pagination을 연습해보기 위해서, Container / Presenter로 나누어져 있는 컴포넌트가 아닌 원페이지에 먼저 작업을 해봤는데 너무너무 할만하고 쉬웠던 것이다! (물론 한페이지에 다 몰려있었으니 어려울리가...)

 

연습의 결과... 너무 쉽고 간단하잖아?

이제 자유게시판에 응용해서 집어넣어볼까! 라고 생각했는데.. 생각보다 어려운것이다..

 

1. 리스트도 10개씩 계속 데이터가 refetch 될것,

2. 화살표를 누르면 10개씩 넘어갈것 (ex. 현재 1페이지에 있었다면 11페이지로 가야함..!)

3. 현재 1페이지에 있다면 이전버튼은 disabled 될것

4. 마지막 페이지는 10개씩 표출되는 것이 아닌 마지막까지만 표출될것 (ex. 132페이지가 마지막이면 132까지만 페이지네이션 할것)

 

[삽질의 과정]

 

1. 어차피 리스트 안에 있어야 할것이니 list container / presenter에 pagination 을 집어넣음

2. 보기에 너무 지저분해서 나누기로 결심함. (container / presenter / quries / types / styles)

3. 화살표만 표출되고 숫자는 안나옴... 왜그러지?..

4. data 연결이 문제인 것을 발견 props.를 전부 연결되게 수정하고 type 지정

5. 번호는 나오는데 버튼이 안눌리네...?

6. 버튼 부분 console.log 찍으면서 어디가 오류인지 체크... 

7. 번호는 눌리게 수정 완료 하지만 데이터가 변경이 안되고 첫페이지꺼만 고정됨.

8. console.log 찍어서 인덱스 넘버는 잘 바뀌나 확인해봄 잘 바뀜.

9. query 에 데이터지정을 똑바로 안줘서 생긴 오류 발생... 삽질 완료