페이징 또는 페이지네이션이란?
게시판에서 쓰인다. 한 페이지에 전체 글의 리스트를 다 불러올 수 없으니
여러 페이지로 나누어 게시물 리스트를 분산 시켜 보는 방법이다.
API를 받기 전에, 더미 데이터를 json으로 만들어서,
페이징 기능을 구현하였는데 내가 하나 간과한 것이 있었다.
바로, 지금 내가 진행하는 프로젝트는, 이력서 포폴용이 아닌,
사용자들을 대상으로 서비스를 하기 위한 프로젝트를 했다는 것이다.
그게 무슨 말이냐면, 게시판의 글이 100개 또는 200개 이상의 데이터가 쌓일 수 있다는 것이다.
난 여태껏 포폴용으로 만들기 때문에 내가 만들어본 페이징 기능은 게시판 글이 100개든 200개든 심지어 2000개든 1~10까지의 페이지 구간 안에 전부 들어가게 구현을 했던 것이다.
이렇게 되면, 게시판 한 번 클릭할 때,
2000개 글 전부가 다운 될 때까지 기다려야 한다는 것이다.
응??, 아까 페이지를 나눈다고 하지 않았나?
맞다 페이지를 나눈다고 했지만, 내가 말한 페이지를 나눈 다는 것은 한 페이지에 slice함수를 활용하여 나눈 다는 것이었다.
API관련 서류를 보니 get방식에 limit=100?page=1이라는 부분을 보고 내가 그동안 구현하려는 방식이 썩 좋지 않았다는 것을 알게 됐다.
처음 구현해야 하는 방식이기에 머리가 지끈했다. 이 글을 읽으시는 분이
그냥 라이브러리를 써!! 라고 생각하실 수도 있지만,
어리석게도, 라이브러리를 사용할 생각을 못했다… (나 바본가?)
그럼 어떻게 구현하였는지 설명해보겠다.
일단, API로 limit=100?page=1을 request하였다.
(설명하자면, 한 번에 100개의 게시물만 불러오도록 요청하는 것이다. 처음에 1에서 100까지의 게시물을 불러왔다면, page=2일 경우 101에서 200의 게시물을 불러오는 거다.)
useEffect를 사용하여 api가 연결 될 때,
받아오는 데이터의 length를 변수에 담았고, 100개의 게시물 중에서, 1~10, 11~20의 글이 보여지도록 slice함수를 사용하였다.
그리고 나서 91~100 개의 게시물까지 보여지고 다음 페이지로 이동할 때
dispatch를 활용하여 action을 줄 때, 파라미터로 그 다음 페이지를 담아준다.
그러면 새로운 100개의 게시물(101~200까지)을 받아올 것이다.
파라미터로 넘겨주는 number 타입의 변수는 dispatc할 때마다 ++1 해주었다.
그런데, 만약 게시글이 쌓인 데이터가 80개 밖에 없을 때, 넘어갈 페이지가 없으면 어떻게 하나?일단 넘어갈 페이지에 아무런 데이터가 없을 경우, 예외처리를 해주지 않으면
당연히 게시물이 없는 빈 페이지와, 페이징 숫자도 보이지 않을 것이다.
그렇다면 어떻게 해주어야 하나?
나의 경우 다음으로 넘어가는 버튼 tag에 disabled를 걸거나
(당연히 disable에 조건을 넣어줘야 한다. 예를 들어 currentPage, 현재 페이지와 마지막 페이지의 번호가 같을 때)
useEffect를 사용하여 다음으로 넘어가는 페이지에 게시물이 비어 있을 때,
바로 이전 페이지(글이 있는 마지막 페이지)로 currentPage를 변경하는 것이다.
현재 나는 두 가지 방법을 모두 사용하고 있다.
누군가에게 이런 질문을 받았다. Limit을 10개로 하고 페이지 번호를 누를 때마다 dispatch 하는 게 좋다고 말이다.
내 생각은 다르다, 렌더링 방식에 따라, 조금 다를 수 있겠지만, 그래도 대부분은 이 방식이 맞을 것 같다고 생각됐다.
이유는, 10개의 게시물을 지속적으로 여러 사람이 dispatch 주는 게, 100개씩 요청하는 것보다, 더 많이 서버에 요청하여, 부담을 주지 않을까 싶기 때문이다.
