페이지네이션도 다뤄주실 수 있나요?
345
작성한 질문수 33
공식문서를 봐도 좀 어렵더라구요
계획 없으시면 어쩔 수 없죠...
답변 1
4
안녕하세요, Choi Boo님!
페이지네이션 방식은 인피니티 스크롤 방식에 비해 개발 방식은 단순하지만 gatsby-node.js 파일에 페이지네이션 부분 코드를 추가해주어야 합니다.
기본적으로 Gatsby는 이미 생성되어 있는 페이지를 제공하는 것이라 일일이 콘텐츠를 쪼개어 미리 페이지를 여러 개 생성해 제공하는 방식이기 때문에 createPage API로 모든 페이지를 생성합니다.
물론 위의 경우와 같이 미리 모든 페이지를 생성하지 않고 ?page=1 과 같이 Query String으로 처리할 수도 있지만, 모든 게시글 정보를 미리 로드해야 하기 때문에 게시글의 수가 많아지면 너무나도 비효율적인 방식입니다.
현재 제 블로그에 Gatsby 페이지네이션 방식이 적용되어 있어 샘플 코드 올려드리겠습니다.
gatsby-node.js 파일 내, createPages API 부분
.png)
BlogPostListTemplate 코드의 일부분
gatsby-node.js 파일에서 context로 skip이라는 값을 넘겨줍니다.
대략 10개 단위로 목록을 띄워주기 때문에 2페이지에는 10개가 스킵되고, 3페이지에는 20개가 스킵됩니다.
그래서 for문을 통해 skip 값을 생성해 BlogPostListTemplate 컴포넌트의 Graphql Query 파라미터로 넘겨주어 해당 값만큼 게시글을 건너뛰고서 조회하게 됩니다.
이런 방식으로 페이지네이션이 이루어집니다.
쿼리오류 Field "thumbnail" must not have a selection...
1
855
1
타입스크립트를 설정할 때 jsxPragma 옵션을 뺀 이유는 무엇인가요?
1
588
1
마지막 배포 부분 질문드립니다!
1
617
1
'[username]/[username].github.io' -> 'username/reponame'
0
339
0
IntersectionObserver deploy( gatsby build) 시 오류(자답)
1
391
1
PostHead.tsx BackgroundImage 동작오류(자답)
1
289
0
19강 인피니티 스크롤 IntersectionObserver 코드 위치 수정이 필요합니다.
1
405
1
썸네일 이미지 제작 및 학습 방법 관련 문의
1
439
1
배포 후 포스트 업로드 방법
1
378
1
배포 질문이요!
1
514
1
gatsby develop 오류
1
934
1
깃허브 레퍼지토리 질문드려요
1
341
1
특정 게시글을 클릭하여 상세 페이지로 넘어가는 과정과 SPA에 관한 질문
1
282
1
Unhandled Runtime Error 가 뜹니다
0
504
2
sign in with GitHub 클릭 시
1
393
3
동작 반복 시 오류
1
350
2
const BackgroundImage 질문
1
210
1
오타 문의
1
300
2
Props로 받아 포스트 데이터 출력하기가 안됩니다.
1
200
1
index.tsx allMarkdownRemark 에러..
0
592
2
스네이크 케이스로 변수명을 짓는 이유
1
248
1
'Tagged Template Literal 방식을 통해 정의한 CSS 적용 방법'에서 발생하는 문제
3
349
2
상단 이미지를 썸네일 사용하지않고 다른 이미지를 쓰고싶습니다
1
281
1
여기까지 했는데 runtime 에러가 발생합니다
2
281
1