리액트 심화 4주차 정리

[수업 목표]

1. 무한 스크롤 기능을 만들어본다.
2. 쿼리로 데이터를 정렬해서 가져와본다.
3. 파이어스토어의 복합 쿼리를 사용해본다.
4. 파이어베이스의 실시간 데이터베이스를 사용해본다.

[4주차에서 배우는 것]

- 무한 스크롤 직접 만들기

- 댓글 작성, 목록 보기

- 실시간으로 알림 받기 (feat. realtime database)

 

 

일단 내 게시글 최근 순서대로 보이게 만들어주자! 그럴려면 '쿼리'를 사용

 

1) redux/post.js 에서 getPostFB 함수로 간다.

2) 파이어베이스 콘솔 들어온 후 <단순 쿼리 및 복합 쿼리 실행> 참고

firebase.google.com/docs/firestore/query-data/queries?authuser=0

Cloud Firestore에서 단순 쿼리 및 복합 쿼리 실행  |  Firebase

firebase.google.com/docs/firestore/query-data/order-limit-data?authuser=0

Cloud Firestore로 데이터 정렬 및 제한  |  Firebase

3) getPostFB 함수 수정(쿼리 이용)

const getPostFB = () => {
  return function (dispatch, getState, { history }) {
    const postDB = firestore.collection("post");

    let query = postDB.orderBy("insert_dt", "desc").limit(2);

    //가지고 올 때
    query.get().then(docs => {
      let post_list = [];
      docs.forEach((doc) => {
        let _post = doc.data();

        // ['commenct_cnt', 'contents', ..]
        let post = Object.keys(_post).reduce(
          (acc, cur) => {
            if (cur.indexOf("user_") !== -1) {
              return {
                ...acc,
                user_info: { ...acc.user_info, [cur]: _post[cur] },
              };
            }
            return { ...acc, [cur]: _post[cur] };
          },
          { id: doc.id, user_info: {} }
        );

        post_list.push(post);
      });

      console.log(post_list);

      dispatch(setPost(post_list));
    });
  };
};

 

무한 스크롤

무한 스크롤을 한다는 것은? 

게시글 리스트가 있는데 이 리스트를 나눠서 가져오겠다는 것!

즉, 게시글 리스트를 한 방에 갖고 오는 게 아니라 나누고 나눠서 스크롤을 하는 거에 따라서 

스크롤이 끝에 닿으면 다음 거 이런식으로 가지고 오는 것.

 

사전 준비: 이걸 하려면 우리가 예전에는 firestore에서 데이터를 통으로 가져 왔다면 이걸 잘라서 가지고 올 줄 알아야 함!

 

무한 스크롤은 곧 페이징 처리를 하겠다는 건데,

단 1,2,3페이지 버튼 안누르고 스크롤로만 paging을 하는게 무한 스크롤 !

 

[How to?] 무한스크롤 컴포넌트를 만들고,

• 게시글 컴포넌트들 (리스트!)
• 다음 목록을 불러올 함수
• 파이어스토어에서 불러오는 중인 지, 아닌 지 판별자
• 다음 글이 있나, 없나 판별자 이 4가지를 넘겨줄거예요.

앗, 그러면 미리 사전에 준비할 건 뭐가 있을까요? 🙂

• 게시글을 가져올 때(파이어스토어 통신할 때), 어디까지 가져왔는 지, 다음엔 뭐부터 가져올 지 페이징 정보!
• 게시글을 가져오는 중인 지, 아닌 지 구분해야겠다!(스크롤마다 계속 다시 불러오면 안되니까!)
• 게시글을 가져오는 중이구나~ 알 수 있도록 스피너 컴포넌트를 만들자!

-->Debounce vs Throttle ?

우리가 스크롤을 내리는 데 여기에서 Debounce를 걸어버린다면?

사용자가 스크롤을 내리다가 끝까지 가서 더는 스크롤을 내리지 못할 때, 그리고 사용자가 스크롤을 더이상 하지 않을 때 그 때 까지 다음 게시글을 불러올 수 없음. 

그럼 이건 Debounce 보단 Throttle이겠다!

사용자가 밑으로 스크롤 하는 도중에 어느 정도 밑에 내려가면 완전히 바닥에 닿지 않았더라도 다음 목록을 불러 와줘야 이게 안끊기고 스크롤이 되는 느낌이 오기 때문이다.