[React-Query] 1. 리액트 쿼리 기초편

리액트 쿼리란?

• 데이터 페칭, 캐싱, 동기화, 서버 데이터 업데이트 등을 쉽게 해주는 리액트 라이브러리.
• 비동기 로직을 쉽게 다룰 수 있음.
• 통신 자체를 하는 것이 아니므로, axios나 fecth와 함께 써야함.

설치

1. npm install react-query
   -> 현재 4버전까지 나왔는데, 오늘 포스팅은 3버전 기준이다.
2. App.jsx 파일 설정

• QueryClient, QueryClientProvider를 임포트하고 전체 앱을 감싸준다.
• ReactQueryDevtools를 임포트하고 가장 하단에 추가해준다.

import "./App.css";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();

function App() {
  return (
    // provide React Query client to App
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>hello</h1>
      </div>
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

export default App;

3. 사용을 원하는 컴포넌트 파일에서 임포트해서 사용하면 된다.

• 리액트 쿼리 dev tools

1. 쿼리 키로 쿼리를 표시해줌
2. 활성(active), 비활성(inactive), 만료(stale) 상태를 알려줌
3. 마지막으로 업데이트된 시간 알려줌
4. 데이터 탐색기
5. 쿼리를 볼 수 있는 쿼리 탐색기
   => production 모드에서는 표시되지 않음.

useQuery

• 쿼리 키를 통하여 통신 로직 데이터를 불러오고, 상태를 관리할 수 있는 Hook이다.

• 쿼리 키는 중복되면 안된다.

• 사용 예시
  const {data,isError, error, isLoading} = useQuery("posts", fetchPosts); 와 같은 방식으로 사용할 수 있고, data이외에도 다양한 상태를 구조분해 할당을 통해 사용할 수 있다.

• isLoading

1. isFetching의 하위개념으로, 캐시데이터가 없고 쿼리를 만들지 않았음을 뜻한다.
2. isFecthing은 비동기 쿼리가 해결되지 않았음을 뜻한다.
3. 페이지네이션시 캐시된 데이터가 있냐 없냐를 판단해야하기 때문에 isFecthing과 구분해서 사용해야한다.

• Stale Data(만료된 데이터)

1. staleTime : 지정한 시간(초)까지는 업데이트가 되지 않아도 되는 시간을 뜻함.
2. UseQuery 세번째 파라미터에 옵션으로 사용한다.
3. 단위는 1/1000 초이다.
4. 이 시간이 끝나면 fresh 상태에서 stale상태로 바뀐다.
5. 예시

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

• staleTime VS cacheTime

1. statleTime : 리페칭 할 때 고려사항이 된다.
2. cahcheTime
   • cachetime은 특정 쿼리에 대한 useQuery가 활성화 된 후 경과한 시간을 뜻한다.
   • 특정 쿼리에 대한 활성 useQuery가 없을 경우 해당 데이터는 콜드 스토리지로 이동한다.
   • 캐시타임이 만료되면, 캐시 데이터가 만료된다. 디폴트 타임은 5분으로 설정되어있다.
   • 하지만 잘못사용하면 계속 fetching되므로 빈화면이 보이는 경우가 생기므로 전에 데이터를 유저에게 보여주는게 나을 때가 있으므로 적절히 사용해야함.

useQueryClient(prefetch)

• prefetch 메소드를 사용하기 위한 Hook
• prefetch란?
  1. 데이터를 캐시에 추가해서 캐시가 만료되지 않았다면, 데이터를 로드하는 중에 캐시에 있는 데이터를 보여주는 것
  2. 기본적으로 stale상태이며, 변경 가능함.
  3. 추후에 사용자가 사용할만한 데이터를 모두 프리페칭해서 보여주는것이 좋음.
  4. 매끄러운 페이지네이션을 만들 때 사용함.
  5. 예시

const queryClient = useQueryClient();

    useEffect(() => {
      if (currentPage < maxPostPage) {
        const nextPage = currentPage + 1;
        queryClient.prefetchQuery(["posts", nextPage], () =>
          fetchPosts(nextPage)
        );
      }
    }, [currentPage, queryClient]);

• useEffect를 이용해서 현재 페이지가 바뀔 때마다 hook을 호출해서 데이터를 미리 받아올 수 있게하고, 다음페이지를 불러오는 코드가 호출되면 미리 캐시에 저장된 데이터를 보여줌.

useMutation

1. mutate함수를 리턴하는 hook
2. 변경사항을 토대로 서버를 호출할 때 사용됨.(put,post, delete.... )
3. 데이터를 저장하는게 아니므로 쿼리키가 필요 없음.
4. 캐시된 항목이 없으므로 isFetching이 없음. (isLoading은 존재함)
5. 예시

const updateTitleMutation = useMutation(() => updatePost(post.id));

return 
(<>
  <button onClick={() => updateTitleMutation.mutate(post.id)}>
        Update title
      </button>
      {updateTitleMutation.isLoading && <p>Loading Update title</p>}
      {updateTitleMutation.isError && <p>Error Update title</p>}
      {updateTitleMutation.isSuccess && <p>Update title</p>}
       
       </>)

---

유데미 : React Query : React로 서버 상태 관리하기
강의를 듣고 정리한 내용입니다.