학습 이유

• 동아리 네트워킹에서 리액트 쿼리에 대해 많이 알고 사용하고 있다는 것을 알게 되었다.
• 캐싱, 값 없데이트 등 여러 기능을 활용하면 최적화와 개발시 편리성을 동시에 잡을 수 있을 것 이라 생각 되어서 빠르게 공부하고 프로젝트 개발시 사용해야겠다고 생각이 들었다.
• 현재는 v4 tanstack query까지 나와있는 상태이다. (react query부터 차근차근 해보자)

ReactQuery란?

• 클라이언트에서 서버 데이터 캐시를 관리한다.
• 서버데이터가 필요할때 fetch,axios를 사용해 서버로 이동하는것이 아니라 ReactQuery 캐시를 요청하고 여러 편리한 기능을 제공한다.
  • 데이터 업데이트시 자동으로 get
  • 데이터가 만료되었을때(stale상태) 다시get
• 서버상태관리에 도움이되는 도구 제공
  • 서버에 대한 쿼리의 로딩 및 오류상태 유지
  • pagination,무한스크롤 필요한 경우 데이터를 가져 올 수 있는 도구 제공

초기세팅

QueryClient,QueryClientProvider 루트컴포넌트에 설정

---

import { Posts } from "./Posts";
import "./App.css";

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Blog Posts</h1>
        <Posts />
      </div>
    </QueryClientProvider>
  );
}

export default App;

UseQuery메서드를 통해 사용.

---

import { useQuery } from "react-query";
//useQuery인수 (키값,비동기함수)
const { data } = useQuery("post", fetchPosts);

UseQuery 옵션

---

• 공식문서를 보면 isFetching,isLoading,isError 등등 많은 옵션을 볼 수 있다.
• isFetching
  • 비동기 쿼리가해결되지 않았음을 의미
• isLoading
  • isFetching에 대한 하위집합
  • 가져오는 상태에 있음을 의미
  • 캐쉬된 데이터x

React Query Dev Tools

---

import { ReactQueryDevtools } from "react-query/devtools";

return
<ReactQueryDevtools />

• 컴포넌트로 추가하여 사용.
  

Stale Data(만료된 데이터)

---

• staleTime

  • 만료되기 전까지 오래된 데이터를 가지고 있어도 괜찮은 시간

    const { data, isError, error, isLoading } = useQuery("post", fetchPosts,{staleTime:2000});

  • 리페칭은 데이터가 만료될 경우에만 실시한다.

  • staleTime 기본값 0 인이유?

    • 개발자 답변 : 데이터는 항상 만료상태이므로 서버에서 다시 가져와야 한다고 가정한다.
• cacheTime
  • 특정 쿼리에 대한 활성 useQuery가 없는 경우 cold storage로 해당 데이터 이동
  • 캐시 타임 만료시 캐시의 데이터 만료 (기본값 5분)
  • 캐시 만료시 가비지 컬렉션 실행, 데이터 사용불가.
  • 데이터가 캐시에 있는 동안 페칭할때 사용할 수 있다.

쿼리키값에 문자열 대신 배열을 넣으면

---

• 문자열 ex) ‘comments’

  • 게시물의 댓글을 구현시 키값에 comments로 동일하게 주게되면 1번게시물의 댓글이 2번게시물의 댓글에도 동일하게 뜨게된다. 리페칭이 안되는것.

• 배열 ex) [’comments’,post.id]

  • 쿼리키를 쿼리에 대한 의존성 배열로 취급하게된다. useEffect 의존성 배열로 생각하면 쉬울 것 같다.
  • post.id가 업데이트되면 새로운 쿼리를 생성 ⇒ staleTime,cacheTime가지게됨
  • 모든 comments가 각기 다른 쿼리로 다뤄질 수 있게된다
    
  • 캐시에 있는 데이터들(inactive상태) 확인 가능하다. cachetime이 지나면 가비지로 수집 될 예정.