[LAB-6] firestore의 Pagination 중 이전 페이지

[SSY1203]

질문 작성자

신선영

문제 상황

전에 알려주신 대로 nextPage를 불러오는 것 까진 했는데, prevPage로 갈려면 어떻게 할지 고민하다가 lastVisible을 바꿔주면 되지 않을까 했는데, lastVisible을 지정해주기가 어려워서ㅠ 페이지화로 불러온 데이터를 이차원 배열로 받아서 렌더링을 해주는 게 좋을까요? 아니면 firestore에서 제공해주는 메서드들로 할 수 있는 방법이 따로 있을까요?


위 사진은 queryPage를 실행하는 버튼 클릭 시, 작동하는 과정입니다. 다음으로는 넘어가지는데 이전이 안돼요ㅠ

프로젝트 저장소 URL

• 공개된 GitHub 프로젝트 저장소 URL을 여기에 남깁니다.
• develop 브랜치
• 6lossom-develop.zip
  env.zip

환경 정보

• 운영체제 정보 (Windows)
• Node.js 정보 (예: v16.14.0)
• 라이브러리 정보 (예: React v18.0.2)

[yamoo9]

문제 해결

Firestore 데이터베이스를 사용해 페이지네이션 할 때 이전 데이터를 가져오려면 endBefore 또는 endAt API를 사용해야 합니다.

endBefore 함수를 사용해 끝점을 임의로 선택할 수 있습니다. (참고)

아래 작성된 데모 코드를 확인해보세요. 😊

PaginationDemo

function PaginationDemo() {
  const [isLoading, setIsLoading] = useState(true);
  const [list, setList] = useState([]);
  const [lastVisible, setLastVisible] = useState(null);
  const [pageTotalCount, setPageTotalCount] = useState(0);
  const [hasPrevPage, setHasPrevPage] = useState(false);
  const [hasNextPage, setHasNextPage] = useState(true);
  const ITEMS_PER_VIEW = 2;

  useLayoutEffect(() => {
    getPageTotalCount();
    queryPage('next', ITEMS_PER_VIEW);
  }, []);

  useLayoutEffect(() => {
    const { length } = list;
    setHasNextPage(length === pageTotalCount ? false : true);
    setHasPrevPage(list.length <= ITEMS_PER_VIEW ? false : true);
  }, [list.length, pageTotalCount]);

  const sneakerItemsRef = collection(db, 'categories/sneakers/items');

  const getPageTotalCount = async () => {
    const res = await getCountFromServer(
      query(sneakerItemsRef, orderBy('createAt'))
    );

    setPageTotalCount(res.data().count);
  };

  const queryPage = async (type = 'next', limitCount) => {
    let q;
    if (!lastVisible) {
      q = query(sneakerItemsRef, orderBy('createAt'), limit(limitCount));
    } else {
      let isNext = type === 'next';
      let updateCount = list.length - limitCount;
      q = query(
        sneakerItemsRef,
        orderBy('createAt'),
        isNext ? startAfter(lastVisible) : endBefore(lastVisible),
        limit(
          isNext
            ? limitCount
            : updateCount <= limitCount
            ? limitCount
            : updateCount
        )
      );
    }
    const docSnapshot = await getDocs(q);

    if (isLoading) {
      setIsLoading(false);
    }

    const docs = docSnapshot.docs;
    queryData(type, docs);
  };

  const queryData = (type = 'next', docs) => {
    const listItems = [];

    docs.forEach((doc) => {
      listItems.push({ id: doc.id, ...doc.data() });
    });

    const updateList = type === 'next' ? [...list, ...listItems] : listItems;
    setList(updateList);

    let nextDoc = docs[docs.length - 1];
    if (nextDoc) {
      setLastVisible(nextDoc);
    }
  };

  return (
    <div
      style={{
        display: 'flex',
        gap: 20,
        flexFlow: 'column',
        alignItems: 'flex-start',
        padding: 40,
      }}
    >
      <h2>Pagination Firestore</h2>
      {isLoading ? (
        <div>LOADING...</div>
      ) : (
        <>
          <p>
            {list.length} / {pageTotalCount}
          </p>
          <div style={{ display: 'flex', gap: 4 }}>
            <button
              type="button"
              disabled={!hasPrevPage}
              onClick={() => {
                queryPage('prev', ITEMS_PER_VIEW);
              }}
            >
              Prev
            </button>
            <button
              type="button"
              disabled={!hasNextPage}
              onClick={() => {
                queryPage('next', ITEMS_PER_VIEW);
              }}
            >
              Next
            </button>
          </div>
          <ul>
            {list.map((item) => (
              <li key={item.id}>{item.name}</li>
            ))}
          </ul>
        </>
      )}
    </div>
  );
}

아래는 작동되는 이전, 다음 탐색 페이지네이션 데모입니다.

가이드 파일

가이드 파일을 다운로드 받아 테스트해보세요. 😃

Pagination-prev-next-demo.zip