[React Query] React Query 설치 및 사용 방법

[React Query] React Query 설치 및 사용 방법

npm i react-query

먼저 react query를 설치하는데 여기서는 v3를 사용했다.

react query의 useQuery hook을 실행하여 서버에서 데이터를 가져오려고 한다.

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

예시로 fetchPosts 함수를 사용해서 JSONPlaceholder 서버에서 게시물을 가져오도록 하겠다.

 

function App() {

  const queryClient = new QueryClient();

 

  return (

    <QueryClientProvider client={queryClient}>

      <div className="App">

        <Posts />

      </div>

    </QueryClientProvider>

  );

}

먼저 App에서 React Query용 쿼리 클라이언트를 만들고 모든 자식 컴포넌트가 클라이언트를 사용할 수 있게 하는QueryProvider를 추가한다.

이제 이 안에 있는 모든 컴포넌트는 React Query Hook을 사용할 수 있다.

async function fetchPosts() {

  const response = await fetch(

    "https://jsonplaceholder.typicode.com/posts?_limit=10&_page=0"

  );

  return response.json();

}

 

  const { data } = useQuery("posts", fetchPosts);

Posts 컴포넌트에서 useQuery를 가져오는데 이 useQuery는 서버에서 데이터를 가져올 때 사용할 훅이다.

useQuery는 다양한 속성을 가진 개체를 반환하는데 지금은 data를 구조 분해한다.

useQuery는 몇 가지 인수를 사용하는데 첫 번째는 쿼리 키, 두 번째는 쿼리 함수이다.

쿼리 키는 쿼리 이름을 쿼리 함수는 이 쿼리에 대한 데이터를 가져오는 방법을 뜻한다.

데이터는 fetchPosts에서 반환된 데이터가 되고 쿼리 함수의 HTTP 요청에서 반환된 JSON이 된다.

  if(!data) return <div />

 

fetchPosts가 비동기식이기때문에 데이터가 정의되지 않은 경우 조기 반환하여 오류를 해결한다.

useQuery에서 반환되는 객체는 더 다양한 속성이 있는데 isLoading과 isError는 데이터가 로딩 중인지 여부와 데이터를 가져올 때 오류가 있는지 여부를 불리언으로 반환한다.

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

  if(isLoading) return <div>Loading...</div>

  if(isError) return <div>{error.toString()}</div>

빈 div를 반환하는 대신 로드 중인지 확인할 수 있다.

에러를 발생시키면 로딩을 포기하기 전까지 총 세 번의 요청을 시도한다.

시도 횟수는 변경할 수 있지만 React Query는 기본값으로 세 번 시도한 후에 해당 데이터를 가져올 수 없다고 판단한다.

 

isError 불리언을 반환하는 것 외에도 반환 객체에는 쿼리 함수에서 전달하는 오류인 error도 있다.

 

error를 string으로 변환하면  TypeError: Failed to fetch가 표시되는 것을 볼 수 있다.