Next.js 블로그 개발하기 - 7 (페이징)

오유진·2023년 4월 12일
0
post-thumbnail

Notes 페이지에서의 문제

  • 페이지 진입 시 모든 노트 데이터를 불러와 화면에 보여줬기 때문에 로딩 속도가 느려지는 문제가 발생했다.

  • 이 문제를 해결하기 위해 페이징(Paging) 기능을 구현해야 했다. 페이징 기능은 데이터를 일정한 크기로 나누어서 특정 페이지에서 해당하는 데이터만 가져오는 방식으로 작동한다. 이를 통해 페이지 로딩 시간을 단축하고 불필요한 데이터를 불러오지 않아도 되는 효과를 얻을 수 있다.

페이징(Paging)

  • Firebase Firestore에서는 limitstartAfter 메소드를 이용하여 페이징 기능을 구현할 수 있다. limit 메소드는 가져올 데이터의 개수를 지정하고, startAfter 메소드는 이전 페이지의 마지막 데이터를 기준으로 다음 페이지를 가져올 수 있도록 도와준다.

  • Notes 페이지에서는 페이지가 바뀔 때마다 startAfter 메소드를 이용해 다음 페이지의 데이터를 불러오도록 구현했다. 이를 통해 페이지 로딩 속도가 향상되었고, 필요한 데이터만을 가져오므로 불필요한 데이터를 불러오지 않는 효과를 얻을 수 있었다.

버튼 Disable

  • Notes페이지에 첫 진입시 서버사이드프롭으로 데이터의 총 사이즈를 구한다.
  • 데이터의 총 사이즈보다 보여줄 limit 이 크다면 버튼을 없애서 더 불러올 데이터가 없다는걸 보여준다.
const [limitSize, setLimitSize] = useState(9);

useEffect(() => {
  if (size >= limitSize) {
    setIsDisable(false);
  } else {
    setIsDisable(true);
  }
}, [limitSize, size]);
  • useEffect 내에서 limitSize가 변경될 때마다 총 데이터의 크기와 비교하여 버튼을 disable 할지 여부를 결정한다.

0개의 댓글