페이지 진입 시 모든 노트 데이터를 불러와 화면에 보여줬기 때문에 로딩 속도가 느려지는 문제가 발생했다.
이 문제를 해결하기 위해 페이징(Paging) 기능을 구현해야 했다. 페이징 기능은 데이터를 일정한 크기로 나누어서 특정 페이지에서 해당하는 데이터만 가져오는 방식으로 작동한다. 이를 통해 페이지 로딩 시간을 단축하고 불필요한 데이터를 불러오지 않아도 되는 효과를 얻을 수 있다.
Firebase Firestore에서는 limit
과 startAfter
메소드를 이용하여 페이징 기능을 구현할 수 있다. limit 메소드는 가져올 데이터의 개수를 지정하고, startAfter
메소드는 이전 페이지의 마지막 데이터를 기준으로 다음 페이지를 가져올 수 있도록 도와준다.
Notes 페이지에서는 페이지가 바뀔 때마다 startAfter 메소드를 이용해 다음 페이지의 데이터를 불러오도록 구현했다. 이를 통해 페이지 로딩 속도가 향상되었고, 필요한 데이터만을 가져오므로 불필요한 데이터를 불러오지 않는 효과를 얻을 수 있었다.
const [limitSize, setLimitSize] = useState(9);
useEffect(() => {
if (size >= limitSize) {
setIsDisable(false);
} else {
setIsDisable(true);
}
}, [limitSize, size]);
useEffect
내에서 limitSize
가 변경될 때마다 총 데이터의 크기와 비교하여 버튼을 disable 할지 여부를 결정한다.