[Firestore] Paging- 게시글 리스트 쪼개서 가져오기.

🌧 게시글 리스트 쪼개서 가져오기.

게시글의 데이터를 한 번에 가져오게 되면 페이지가 로드하는데 많은 시간이 걸려 속도가 느려진다.

때문에 Firestore에서 저장된 게시글 데이터를 한 번에 가져오는 것이 아닌 사용자가 인지할 수 없는 영역 즉, 화면에 아직 보일 필요 없는 게시글들은 불러오지 않고 특정 버튼을 클릭하면 그다음 n 만큼의 게시글을 가져오는 paging 기능을 구현해 보려 한다.

Firebase의 쿼리(query)

파이어스토어에서 원하는 조건으로 데이터를 가져올 수 있는 쿼리(query).

---

💧 날짜 순으로 게시글 정렬하기

firebase에서 지원하는 orderBy 함수로 게시글을 정렬할 수 있다.

  const postDB = firestore.collection('post');
  let query = postDB.orderBy('insert_dt', 'desc');

    query // 데이터베이스에서 날짜 값 기준 내림차순으로 데이터를 정렬하였다.
      .limit(3) // 정렬한 데이터중 3개의 데이터만 선택하고
      .get() // 가져온다.
      .then((docs) => { // firestore 서버에서 비동기로 3개의 데이터를 가져옴.
      
      let post_list = [];
      
       docs.forEach((docElements) => {
          let _post = docElements.data();

          post_list.push(_post);
        });
        dispatch(setPost(post_list));
     })
  }

---

📚 게시글 Paging 처리하기.

구현하기 전 우째하면 좋으노.. 🔍

1. 게시글을 나눠서 가져올 수 있어야한다.
2. limit()로 가져온 게시글이 3개를 가져오고 그 다음 4번째 게시물 부터 가져올 수 있어야 한다.
3. 다음(next)으로 가져올 데이터가 있는지 판별할 수 있어야 한다.

📝 Paging 처리를 하기 위한 설정 만들기.

const initialState = { 
  list: [], // 최종적으로 담을 배열.
  paging : { start: null, next: null, size: 3 },
  // start : 시작점 정보, next: 다음 목록에 대한 정보, size: 몇개씩 가져올 것인지.
  is_loading: false, // paging으로 목록을 가지고 오는 중인지 아닌지에 대한 여부.
}

📝 다음(next)으로 가져올 데이터가 있는지 판별하기.

💋 paging으로 불러오는 데이터 사이즈 3개 보다 1개 더 많이 불러올 것이다.

const initialState = {
    paging : { start: null, next: null, 💋 size: 3 },
}

const getPostFB = (start = null, 💋 size = 3) => {
  return function (dispatch, getState, { history }) {
    const postDB = firestore.collection('post');
    
     let query = postDB.orderBy('insert_dt', 'desc').limit(💋 size + 1);
    
    ...

📝 어디서부터 가져와야 하는지에 대한 시작점(start) 알려주기.

파이어베이스에서 제공하는 startAt() 함수를 이용해서 시작점을 식별할 수 있다.
만약 알파벳을 예를 들어, startAt(C)를 하면. A와 B를 제외한 C를 시작으로 ~ Z의 값이 출력된다.

let query = postDB.orderBy('insert_dt', 'desc');

// 이 코드를 설정해주지 않으면 처음 출력한 3개의 데이터만 paging할때 동일한 데이터가 3개씩 출력된다.
if(start){ // start에 값이 있으면 
  query = query.startAt(start);
  // query 즉, 파이어스토어 저장된 날짜순으로 정렬된 데이터 중에
  // start로 정의된 데이터를 시작으로 마지막 까지의 데이터들을 query에 저장한다.
}

query
	.limit(size + 1) // query에 담긴 데이터들을 4개까지만 불러서
	.get() // 파이어스토어에서 가져온다.
	.then((docs) => { // 데이터 결과 값들을 넘겨받는다.

  let post_list = [];
  docs.forEach((doc) => {
   let _post = doc.data();
    
    })
  })

📝 새로운 paging 정보 만들기

다음으로 불러올 리스트의 정보를 담을 next와 start, size에 대한 정확한 정보를 담기 위해 paging에 대한 정보를 다시 구성해주어야 한다.

query
	.limit(size + 1) 
	.get() 
	.then((docs) => {
  
 let post_list = []; 
  
 let paging = { 
   size: size,
   start: docs.docs[0], // document들 안에서 가장 첫번째 것을 가져온다.
   next: docs.docs.length === size + 1 ? docs.docs[docs.docs.length - 1] : null 
   // 가져오는 데이터 갯수를 4개로 지정했는데 3개 밖에 없을 수 있다, 
   // 이때 next가 지정한 데이터 갯수(4) 가 아니라면 null을 넣어준다. 다음(next)이 없다는 뜻.
 }
}