[리액트] React-Query - 1. data fetch & error

React-Query

비동기 통신 fetch, axios 등을 사용하면서 서버 상태 관리 및 비동기 로직을 쉽게 다루게 해주는 라이브러리 

비동기 통신을 하는 방법은 몇 가지 있지만 react-query를 사용하면 요청을 보내는 콜백함수를 전달하기만 한다면 라이브러리에서 제공해주는 많은 기능들(캐싱, 값 업데이트, 에러 핸들링 등)을 이용할 수 있으며 코드도 매우 간단해집니다. 

 

사용하는 이유

서버로부터 값을 가져오거나 업데이트를 해야하는 로직을 store에서 개발해야하는 경우들이 많습니다. store는 client에서 state를 유지하면서 내부에 client data 와 server data 가 공존을 하게 되는 순간이 생겨납니다. 데이터들이 서로 상호작용하면서 혼란을 빚어내는데 react-query를 사용하면 서버, 클라이언트 데이터를 분리시켜줍니다. 위에서 언급했듯이 값을 fetch하는 것 말고도 다양한 기능이 많다보니 사용해야할 이유가 됩니다.

- 캐싱

- get하는 데이터를 update해주면 다시 get을 실행시켜준다

- 동일한 데이터 여러번 요청하면 한번만 요청한다

- 무한스크롤

- 비동기 과정을 선언적으로 관리할 수 있다.

정도가 있습니다.

 

 

 

React-Query로 비동기 Data fetch하기

이전에 react에서 데이터를 가져올 때 useState, useEffect를 사용했었습니다. 이 버젼의 코드와 비교를 해보겠습니다.

 

▶ React-query 사용

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

const fetchSuperHeroes = () => {
    return axios.get('http://localhost:4000')
}

export const RqSuperHeroesPage = (props) => {
    const {isLoading, data, isError, error } = useQuery('super-heroes', fetchSuperHeroes)

    if(isLoading){
        return <h2>LOading....</h2>
    }

    if(isError){
        return <h2>{error.message}</h2>
    }

    return (
        <>
            <h2>RQ Super Heroes Page</h2>
            {data?.data.map(hero => {
                return <div>{hero.name}</div>
            })}
        </>
    )

}

react-query는 react-hook과 비슷한 구조를 가집니다. 두 가지의 인자 값을 받아서 진행됩니다. id와 callback함수로 id는 string 타입을 받을 수 있고 캐싱시키고 다시 불러오기 위한 key값입니다. react-query는 한 번 받아온 데이터를 버리지 않고 저장하고 있기 때문에 저장시킨 데이터를 빠르게 찾아오기 위해서 key값이 필요합니다. 

isLoading, isError는 useQuery hook 중 하나로 데이터를 기다리거나, 에러를 받는 겁니다. 

 

 

 

▶ useState & useEffect 사용

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


export const SuperHeroesPage = (props) => {
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState([]);
    const [error, setError] = useState('');

    useEffect(() => {
        axios.get('http://localhost:4000/').then((res) => {
            setData(res.data)
            setIsLoading(false)
        }).catch((error) =>{
            setError(error.message)
            setIsLoading(false)
        })
    },[])


    if(isLoading){
        return <h2>Loading....</h2>
    }


    if(error){
        return <h2>{error}</h2>
    }


    return (
        <>
         <h2>Super Heroes Page</h2>
          {data.map(hero => {
                return <div>{hero.name}</div>
            })}
        </>
    )
};

 

useState를 쓰는 코드는 react-query를 사용한 코드에 비해서 굉장히 길어진다는 점을 보실 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

👉🏻 React-query 공식문서