프로젝트를 진행하면서 기본 적인 api 요청은 모른채로 react query만 사용해왔었는데, 이번 기회에 기본적인 api 요청 로직을 공부해 봤다.

get을 기준으로 하기 때문에 react query는 useQuery로 비교해 봤다.

React Query 사용

const { data, isLoading, error } = useQuery(queryKey, 
                                            () => axios.get('api주소'), options)

과정

useQuery 내부에 queryKey, queryfunction, options를 넣어주면 된다.

기본적인 api로직과 비교할 것이기 때문에 queryKey 와 options는 생략한다.

queryfunction에는 axios.get 함수를 넣어주면 된다.

이렇게 선언해 주면 알아서 { data, isLoading, error }를 반환해 준다.

기본적인 API 요청 로직

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function StandardApi() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchUsers = async () => {
    try {
      // API요청 시작에는 에러와, 데이터를 null값으로 설정
      setError(null);
      setData(null);
      // try 내부는 정보를 받고 있는 상태기 때문에 loading true
      setLoading(true);
      const response = await axios.get(
        'api주소'
      );
      setData(response.data); 
      // 데이터는 response.data
    } catch (e) {
      setError(e);
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  if (loading) return <div>로딩중..</div>;
  if (error) return <div>에러가 발생했습니다</div>;
  if (!data) return null;
  return (
    <>
    </>
  );
}

export default StandardApi;

과정

Promise를 받환받아야 하기 때문에 async로 묶어 주고

try - catch 문을 선언해 준다

try문 내부에는 데이터, 에러를 null로 설정, 요청중이기 때문에 loading은 true로 설정해준다.

프로미스를 받고 다음 단계로 넘어가야 하기 때문에 await로 api요청을 받고 데이터를 set해준다.

catch문에는 error를 set해준다.

그리고 함수의 마지막에는 loading이 끝났기 때문에 false로 설정해 준다.

정리

기본적이 api 요청 로직을 공부하다 보니 react query도 어차피 기본적인 로직에서 부터 시작했다는 걸 볼 수 있었고 내부적인 동작도 이해할 수 있게 되었다.

❗️ 가장 중요한건 react query가 훨씬 편리하다는걸 알았기 때문에 더욱더 react query를 이용해야 겠다.