[React] react-query 활용해보기

아래는 간단하게 react-query를 사용할려고 만든것이다.

react-query 사용해보기

npx create-react-app my-app
cd my-app
npm install react-query

위의 코드를 따라 쳐서 react를 셋팅해준다. 해당 폴더의 이름은 본인이 마음에 드는 이름으로 바꿔주면 된다.

오류없이 실행되는 코드

src/index.js

src폴더에 index.js에 아래와 같이 코드를 넣어준다. 주석으로 devtools로 되어 있는 것은 devtools로 react-query가 어떻게 돌아가는지 볼 수 있다. 나는 react-query를 맛보기 위해 간단히 만들 것이므로, devtools는 주석처리해준다.

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

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      {/* devtools */}
      {/* <ReactQueryDevtools initialIsOpen={true} /> */}
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

src/App.js

import { useQuery } from 'react-query';

const POSTS = [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }]

function App() {
  const postsQuery = useQuery({
    queryKey:
      ['posts'],
    queryFn: () => wait(1000).then(() => [...POSTS])
  })
  if (postsQuery.isLoading) return <h1>Loading...</h1>
  if (postsQuery.isError) return <pre>{JSON.stringify(postsQuery.error)}</pre>
  return <h1>{postsQuery.data.map(post => (<div key={post.id}>{post.title}</div>))}</h1>
}

function wait(duration) {
	return new Promise(reslove => setTimeout(reslove, duration))
}

export default App;

App.js파일 만들어 위와 같이 코드를 작성해준다.

• wait : wait라는 함수를 만들어서 초단위로 지속시간을 주어 POSTS가 보이도록 하였다. 그리고 wait함수는 promise함수로 이뤄져야 한다.
• isLoading : useQuery가 준비중이라면 loading이라는 글자가 보이도록 구성하였다.
• isError : 에러가 뜰 경우 에러의 이유가 보이도록 설정하였다.
• map : map함수를 돌려 POSTS변수가 보일 수 있도록 하였다.

실행결과

실행결과 모습

오류가 실행되는 코드

src/fetchTodoList.js

import axios from "axios";
import { useQuery } from "react-query";

async function fetchTodoList() {
  const res = await axios.get("https://jsonplaceholder.typicode.com/todos");
  return res.data;
}

function App() {
  const { data, isLoading, isError, error } = useQuery("todos", fetchTodoList);

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

  return (
    <div>
      <ul>
        {data.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

 
위의 코드는 오류없이 나는 코드이다. 그런데 axios.get에 url부분에 오타를 주어 에러가 나도록 설정하였다. 그런데 제대로 보이지 않고 loading만 보일 수 있다. 이럴경우 console창에 오류가 났는지 확인하면 나는 것을 확인할 수 있다.
그리고 isError설정시 return값을 보고 싶다면 개발자 도구에 들어가서 Network탭에 들어가서 No throttling으로 설정되어 있는 부분을 확인할 수 있을 것이다. 그분에서 slow 3G로 설정하면 오류구문을 확인할 수 있다.

Slow 3G 선택 모습

실행결과

실행결과 모습