[React-Query] Section 01

은채·2022년 9월 2일

React-state-management-libraries

목록 보기

1/4

react-query 강의 정리

상태 차이

Client State

웹 브라우저 세션과 관련된 모든 정보
ex. 사용자는 가장 잘 아는 언어로 텍스트를 읽기 위해 언어를 선택하거나, 다크모드 선택 등 => 서버에서 일어나는 일과는 관련 없음
단순히 사용자의 상태 추적

Server State

서버 상태는 서버에 저장된다
클라이언트에 표시하는데 필요한 데이터
ex. 데이터베이스에 저장되는 데이터 (게시글)

React-Query

클라이언트에서 서버 데이터 캐시를 관리한다

react code에서 서버 데이터가 필요할 때, Fetch, Axios 등을 사용해서 서버로 바로 이동하지 않고 React Query 캐시를 요청
역할 : react-query 클라이언트를 어떻게 구성했느냐에 따라 해당 캐시의 데이터를 유지, 관리하는 역할
데이터를 관리하는 것은 react-query이지만, 서버의 새 데이터로 캐시를 업데이트하는 시기를 설정하는 것은 사용자 역할

예시

'blog-posts'라는 키가 있는 데이터 => 데이터 식별 방식

클라이언트 캐시에 있는 이 데이터가 서버의 데이터와 일치하는지 확인해야 함
방법 2가지
1) 명령형 : 쿼리 클라이언트에 이 데이터를 무효화, 캐시에 교체할 새 데이터를 서버에서 가지고 오게 명령
2) 선언형 : 리패치를 트리거(유발)하는 조건 구성 => 브라우저 창이 다시 포커스 되었을 때 => staleTime으로 다시 가져오는 것도 조절 할 수 있음
(30초 후 브라우저 창이 다시 포커싱 되었을 때 서버에서 새 데이터를 가져오게)

react-query에는 상태 관리를 위한 툴이 제공 된다
1) 서버에 대한 모든 쿼리의 로딩 / 오류 상태를 유지 => 수동 작업 x
2) 페이지네이션, 무한스크롤에 필요한 데이터 및 도구 제공
3) 사용자가 필요한 시점을 예상해서 프리패치를 제공
: 데이터를 미리 가져와서 캐시에 넣어놓고 사용자가 필요할 때 제공 (서버 연결을 기다릴 필요가 없다)
4) 서버에서 데이터 변이나 업데이트를 관리할 수 있음
5) 쿼리는 키로 식별되기 때문에 react-query는 요청을 관리 할 수 있고, 페이지를 로드하고 해당 페이지의 여러 구성 요소가 동일한 데이터를 요청하는 경우 쿼리를 한 번에 보낼 수 있음
: 기존 쿼리가 나가는 동안 다른 구성 요소가 데이터를 요청하는 경우 중복 요청을 제거 할 수 있음
6) 서버에서 오류가 발생하는 경우에 대한 재시도 관리
7) 쿼리가 성공, 오류 났을 때를 구별해서 조치를 취할 수 있도록 콜백 전달

react-query ver.3 설치하기

npm install react-query@^3

React Query 버전 4를 사용하시는 경우, 다음과 같은 특이사항이 있다.

버전 4에서는 설치와 임포트(import)에 react-query가 아닌 @tanstack/react-query를 사용하시는 것을 권장
쿼리 키는 반드시 배열이어야 하며, 만약 강의에서 문자열을 쿼리 키로 사용하는 경우, 해당 문자열을 반드시 배열 안에 넣어야 함
onSuccess는 더 이상 setQueryData에서 호출되지 않는다.
이전과는 달리 setQueryData를 호출한 이후에 onSuccess를 호출하는 것으로 작동 순서를 바꾸었기 때문에, 이 상황에서 학습 내용을 버전 4에 적용하시면 문제가 발생

첫번째 프로젝트에서 배울 것

Getting Started

npm install react-query
Create query client

쿼리와 서버의 데이터 캐시를 관리하는 클라이언트

Apply QueryProvider

자녀 컴포넌트에 캐시와 클라이언트 구성을 제공할 QueryProvider 적용
이에 대한 값으로 사용 될 쿼리 클라이언트 필요

Run useQuery

서버에서 데이터를 가져오는 훅

Apply QueryProvider

기존

queryclient와 queryclientprovider를 적용한다.

const queryClient = new QueryClient();


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

  );
}

이 쿼리 클라이언트가 있어야, 공급자를 추가 할 수 있게 되고
공급자가 이 클라이언트가 가지고 있는 캐시, 옵션등을 자녀 컴포넌트로 보낼 수 있다.
이제 내부 posts 컴포넌트에서도 react-query와 관련된 hook을 사용할 수 있게 된다.

하드 코딩 된 data가 아닌 useQuery를 활용하여 데이터를 가져오게 된다.

useQuery와 함께 사용해야 할 몇 가지 인수

1) 쿼리 키 = 쿼리 이름
2) 쿼리 함수 = 쿼리에 대한 데이터를 가져오는 방식 (fetchBoards, fetchPosts = 비동기 함수)

컴포넌트 상단에 쿼리 함수

async function fetchPosts() {
  const response = await fetch(
    'https://~~~~~~~~~'
  );
  return response.json();
}

우리가 매핑 할 데이터는 fetchPosts 에서 반환 된 데이터가 되고 => 위 HTTP 요청에서 반환 된 JSON
=> 비동기 함수이기 때문에, map 실행이 안 될 것.
=> 지금은 if(!data)로 임시방편을 해두자.

데이터가 정의되지 않았을 때 오류로 두지 않고 처리하는 방법은?

isLoading / isError

isLoading 데이터가 로딩중인지 여부
isError 데이터를 가져올 때 오류여부

로딩하는 동안은 loading....가 보인다
에러가 나면... Oops..가 보인다.
=> 리액트 쿼리는 기본값으로 3번 시도한 이후에 오류를 결정한다. (바꿀 수 있음!)

=> 시도하는 중간에는 loading.. 3번 이후에 오류
반환 객체에는 쿼리 함수에서 전달하는 error도 있어서, 활용할 수 있다.