React-Query 비동기 통신 (기본편)

https://techblog.woowahan.com/6339/

Store에서 비동기 통신 분리하기 (feat. React Query) | 우아한형제들 기술블로그

여기를 읽어보면 왜 react-query가 필요한지 알 수 있다.

간단하게 정리하자면 Store에서 비동기 통신을 분리함으로써 store에서는 온전히 상태관리만 할 수 있게 하는 것이다.

그리고 react-query를 쓰면 로딩, 에러 처리가 엄청 간단해진다.

 

https://www.youtube.com/watch?v=hooXEH8ub4A

https://www.youtube.com/channel/UCiw6ewVgQkLMmgWjQp1-gKQ

몰입코딩 아카이브

이 강의를 참고해서 영화 api 를 통해 react-query로 비동기 통신을 해보았다.

한국어 강의는 이게 유일한듯! 

 

+ 더 자세히 강의를 듣고 싶다면 

유튜브에서 react query 라고 검색하면 영어 강의들이 많~~이 나온다.

쉽게 알려주는 것 같으니... 추가로 들어보려고 한다.

 

 

 

 

1. CRA 로 프로젝트를 하나 만든다.

npx create-react-app react-query

 

2. react-query 와 axios를 설치한다.

npm i react-query axios

 

+ 나는 eslint 와 prettier를 적용시켰지만 여기서는 제외하고 설명하겠다.

 

 

root 디렉토리에서

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

QueryClientProvider 로 묶어줘서  App 안에서 react-query를 사용할 수 있게 한다.

 

 

 

 

App.js

import React from 'react';
import { setQuery, useQuery } from 'react-query';

function App() {
  const { isLoading, error, data } = useQuery('movieList', () =>
    fetch('https://yts.mx/api/v2/list_movies.json?with_images=true').then((res) => res.json()),
  );

  if (isLoading) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <div>
      <ul>
        {data.data.movies.map((movie, idx) => (
          <li key={idx}>
            <h5>{movie.title_long}</h5>
            <img src={movie.large_cover_image} alt="" />
            <p>장르 : {movie.genres[0]}</p>
            <p>상영시간 : {movie.runtime}분</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

useQuery를 사용해서 해당 api를 통해 json 값을 받아오자

 

영화 api는 

 

https://yts.mx/api

API Documentation - YTS YIFY

여기서 확인할 수 있다.

 

useQuery를 쓰면 로딩, 에러 처리가 if 문 한줄로 처리가 된다. 따로 로딩과 에러의 state를 만들어줄 필요가 없다.

 

json 파일을 확인해보면 data.data.movies 가 배열이며 이 안에 영화 정보를 담겨 있다.

json 파일 확인해가면서 원하는 정보를 빼주면된다.