[React/TypeScript] 최종프로젝트 - Mango(환경오염 줄이기 / 지구 살리기 프로젝트!) (진행 중) - 리액트 쿼리로 데이터 처리하기

 

 

 

 

마이페이지 내 게시물에서 게시물을 최신순으로 정렬하고 싶었다.

그래서 처음에는 쿼리 키로 데이터를 가져올 때, uid가 일치하는 것만 가져와서 오름차순으로 정렬을 했었다.

하지만 이 방법이 쿼리 키를 여러 번 호출하는 것 같아서 데이터를 한꺼번에 가져온 후 로컬 로직에서 가공하는 방법을 택했다.

 

 

const getAllPosts = async () => {
  try {
    const postRef = collection(db, 'posts');
    const querySnapshot = await getDocs(postRef);
    const posts: PostType[] = [];
    querySnapshot.forEach((doc) => {
      const postData = doc.data() as PostType;
      posts.push(postData);
      // console.log(doc.id, ' => ', doc.data());
    });

    // 객체들을 forEach 사용해서 배열에 담기
    return posts;
  } catch (error) {
    console.error(error);
  }
};

// export { getLikePosts, getMyPosts, getUserRanking };
export { getAllPosts, getMyPosts };

 

 

 

이것 또한 문제가 있는 방법이었다.

정렬하는 곳에서 데이터를 다 가져와서 sort로 정렬하는 것은 프론트엔드에서 너무나 부담스럽고, 비효율적, 서버 성능 저하 문제가 발생한다는 것이었다.

 

그래서 다시 원래대로 복귀해놓았다

여기서 내가 간과한 사실이 있다는 걸 깨닫게 되었다.

 

같은 쿼리키를 사용하면 데이터가 캐싱되어서 여러 번 호출이 되는 것이 아닌데

여러 곳에서 쓰인다는 이유로 여러 번 호출되는 걸로 착각하고 있었던 것이다 .. 

 

전에 썼던 리액트 쿼리 TIL을 다시 보며 공부를 했다.

 

 

2023.12.20 - [React] - [React] react-query 강의 내용 정리

[React] react-query 강의 내용 정리

 

같은 쿼리 키를 사용하여 useQuery 훅을 여러 컴포넌트에서 사용할 경우, React Query는 자동으로 캐싱된 데이터를 가져와서 사용한다. 이렇게 되면 불필요한 네트워크 요청을 줄이고, 애플리케이션의 성능을 개선할 수 있다. 특정 쿼리 키에 대한 요청이 이미 캐시에 있는 경우, useQuery를 호출하는 모든 컴포넌트에서 즉시 캐시된 데이터를 받아올 수 있다.

 

 

또한 나는 staleTime도 1분으로 설정해놓았다.

staleTime도 웹페이지 성격에 따라 설정해주는 게 다르다.

화면이 매번 최신 데이터로 이루어져야 하는 사이트는 굳이 staleTime을 설정해놓을 필요가 없다.

하지만 우리 웹페이지는 굳이 매번 최신의 데이터가 필요없다고 판단하여 1분을 설정해놓은 것이다.

 

---

 

 

 

또한 react-quert의 장점 중 하나가 error와 loading 처리를 한 번에 할 수 있다는 것이다.

useQuery은 비동기 쿼리를 실행하고 그 결과데이터(data), 에러(error), 로딩 상태(loading)를 반환하여

적절한 처리를 할 수 있게 한다. ( mutation은 onError 사용 )

 --> 그래서 try catch 문에 쿼리를 사용하지 않는 것이다

 

 

 

 

 

---