React 에서 REST API 요청하기 (feat.AXIOS, react-query)

프론트앤드는 하나의 클라이언트로서 서버와 통신을 통해 데이터를 받아오고 이를 시각화 하는 역할을 보통합니다. 서버는 사용서버일 수도 있고 자신이 만든 서버일 수도 있는데요. 리액트에서 어떤 API 리퀘스트 라이브러리를 사용하는지 리서치해보고 제가하려는 사이드프로젝트에서는 어떤 것을 쓰는게 적합한지 보도록 하겠습니다.

AXIOS vs FETCH

검색하면 크게 2가지로 사용하는 것을 볼수 있는데 하나는 axios이고 나머지는 라이브러리라기 보단 이미 브라우저에 내장되어있는 함수를 사용하는 방법입니다. 그러다 보니 장단점이 있겠죠? 내장된 것을 사용하다보면 별도의 라이브러리 설치 없이 바로 사용할 수 있는 반면에 REST API를 사용하다보면 단순한 콜이 아닌 파라메터도 넣고, 몇번 리트라이 할 것인지도 정하고, 이를 리턴하고 등등 별도 처리하는 코딩이 필요하기 때문에 axios가 좀더 편리하게 느껴집니다. 다시말해 fetch를 쓰면 axios에서 이미 구현되어져있는 많은 코드를 개발해야하는 단점이 있죠. 단점이 너무 크니까 바로 Axios를 사용하는 것으로 선택합니다. 

https://github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

AXIOS 설치 및 사용

설치를 진행합니다. 저는 이러한 패키지 설치할 때 npm 보다는 yarn을 주로 쓰는데요 이유는 yarn이 패키지별 디펜던시를 조금더 잘 처리해주고 있다는 느낌이 들어서 입니다. npm 사용해서 설치해도 문제없습니다. 그리고 이어지는 코드는 샘플 코드들인데 처음부터 다 이해하려하지 마시고 따라하면서 어떤 느낌인지 접근하시면 좋겠습니다. 이해 못하셔도 다음에 다시한번 설명할 기회가 있을 것이니 너무 걱정하지 마시구요!

$ yarn add axios

위와 같이 설치하니 0.27.2 버전이 설치되었네요. 아직 버전이 1.x 버전이 아니라는게 새삼 놀랍습니다. 아무래도 1.x 의 버전이 아니라면 안정성이 있다고 보기어려우나, 검색하면 온통 axios를 많이 사용하다보니 큰 문제는 없을거라 생각하고 진행하도록 하겠습니다.

메소드별 기본 사용법은 get의 경우 2개의 파라메터(리퀘스트를 보낼 주소, 파라메터)

class App extends React.Component {
  onSearchSubmit(term) {
    axios.get('https://api.unsplash.com/search/photos', {
      params: { query: term },
      headers: {
        Authorization:
          'Client-ID xKtQ6HWW2cUFgoYVQgVdxr1BwqZjg4f_yNFZ8rjb5FY'
      }
    });
  }

위 코드는 어디까지나 설명을 위한 코드임으로 클래스 형태로 되어있는 것은 크게 중요하지 않습니다.

ajax request가 끝났을때 알려주는 method 추가 : .then 사용 -> promise를 사용할 때 가능

class App extends React.Component {
  onSearchSubmit(term) {
    axios.get('https://api.unsplash.com/search/photos', {
      params: { query: term },
      headers: {
        Authorization:
          'Client-ID xKtQ6HWW2cUFgoYVQgVdxr1BwqZjg4f_yNFZ8rjb5FY'
      }
    }).then((response => {
    	console.log(response.data.results);
    });
  }

aysnc await 문법 사용

async 키워드를 method 이름 앞에 추가하고, return 앞에(혹은 무엇이든 결과를 보기까지 약가읜 시간이 걸리는 것 앞에) await 키워드를 붙여줍니다.

class App extends React.Component {
  async onSearchSubmit(term) {
    const response = await axios.get('https://api.unsplash.com/search/photos', {
      params: { query: term },
      headers: {
        Authorization:
          'Client-ID xKtQ6HWW2cUFgoYVQgVdxr1BwqZjg4f_yNFZ8rjb5FY'
      }
    });
   
   console.log(response.data.results);
  }

Response를 componet state에 넣기

state initialize with array (state의 디폴트는 null이 아닌 array로 하는게 좋음), setState로 state 업데이트하기

class App extends React.Component {
  state = { images: [] };
  async onSearchSubmit(term) {
   const response = await axios.get('https://api.unsplash.com/search/photos', {
      params: { query: term },
      headers: {
        Authorization:
          'Client-ID xKtQ6HWW2cUFgoYVQgVdxr1BwqZjg4f_yNFZ8rjb5FY'
      }
    });
   
 this.setState({ images: response.data.results });
  }


render() {
  return (
    <div className="ui container" style={{ marginTop: '10px'}}>
    <SearchBar onSubmit={this.onSearchSubmit}/>
	<ImageList images={this.state.images}/>
     </div>
    );
  }
}

AXIOS와  React-Query

기존의 데이터 패칭에는 로딩 상태 관리 및 페칭한 데이터 관리 등을 위해 여러 hooks를 사용해야 했으나, react-query를 사용하면 훨씬 간결하게 로직을 작성할 수 있습니다.

react-query는 원격 데이터를 전역 상태로 관리해야만 하던 문제를 해결 할 수 있는 완벽한 훅 라이브리이며, 사용자가 데이터를 불러올 곳을 라이브러리에 알려주기만 하면, 캐싱, 백그라운드 업데이트, 오래된 데이터 교체까지 어떠한 추가 코드나 설정도 없이 해결됩니다.-> 장기적으로 어플리케이션 유지보수하기 쉽게하는데 도움을 주게됩니다.

AS-IS

const Search = () = {
  const [isLoading, setLoading] = useState(false)
  const [isError, setError] = useState(false)
  const [data, setData] = useState({});

To-BE

const Search = () => {
	const { status, data, error, isFetching } = useQuery('search', async () => {
  return data
})

axios 기본 설정

app.js

import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

type Group = {
  name? : string,
  age : number
}
function useGroups() {
   return useQuery<Group[], Error>('groups', fetchGroups)
 }

Query Basic

쿼리는 고유키에 연결된 비동기 데이터 소스 단위로 작동하며, 서버에서 데이터를 가져오기 위하 모든 Promise 기반 메서드(GET 및 POST 메서드 포함)에 대해서 사용이 가능합니다.

import { useQuery } from 'react-query'
 
function App() {
  const info = useQuery('todos', fetchTodoList)
}

useQuery 훅

데이터를 불러오는 코드를 React Query 라이브러리에 등록하기 위해 사용하며 키워 데이터를 불러오는 비동기 함수를 인자로 받아 어플리케이션의 현재 상태를 나타내는 값을 반환

import React from 'react';
import axios from 'axios';
import {useQuery} from 'react-query';
// axios를 사용해 react-query 로 데이터 불러오기
function App() {
  const { isLoading, error, data } = useQuery('fetchLuke', () =>
  axios('http://swapi.dev/api/people/1/'))
return (
    <div className="App">
      <h1>스타워즈 API와 함께하는 React Query 예제</h1>
      {error && <div>뭔가 잘못됐군요 ...</div>}

      {isLoading ? (
        <div>루크 스카이워커의 데이터를 불러옵니다 ...</div>
      ) : (
        <pre>{JSON.stringify(data, null, 2)}
        </pre>
      )}
    </div>
  );
}
export default App;

useQuery 함수를 활용헤 API로부터 데이터를 불러온 방법을 확인해보자

const { status, data, error, isFetching } = useQuery('todos', async () => {
  const { data } = await axios.get('/api/data')
  return data
})

useMutation

원격 데이터의 생성/업데이트/삭제에 주로 사용하며 데이터를 업데이트 하기 위한 비동기 함수를 인자로 갖고 뮤테이션을 실행하기 위한 뮤테이트 함수를 반환

const [mutate] = useMutation(
  text => axios.post('/api/data', { text }),
)
mutate("Learn about React Query")

Post 요청이 성공적으로 끝나면 입력 칸이 공백으로 바뀌는 것도 확인 할 수 있다.

const [mutatePostTodo] = useMutation(
  text => axios.post('/api/data', { text }),
  {
    onSuccess: () => {
      // 쿼리 무효화(Query Invalidations)
      // queryCache.invalidateQueries('todos')
      setText('')
    },
  }
)