React Query란?

정의

React Query는 React에서 비동기 로직을 쉽게 다루게 해주는 hook 라이브러리입니다. fetching, caching, synchronizing and updating server state를 쉽게 해줄 수 있습니다.

목적

비동기 로직을 쉽게 다루기 위해 Reacth Query를 사용합니다. 그러면 어떻게 쉽게 다루는 지 React Query를 사용했을 때 예제와 사용하지 않았을 때 예제를 비교해 알아보겠습니다.

React Query를 사용하지 않았을 때 예제입니다.

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

useEffect(() => {
  const fetchData = async () => {
    setError(false)
    setLoading(true)
    try {
      const response = await axios('api 주소')
      setData(response.data)
    } catch (error) {
      setError(true)
    } 
    setLoading(false)
  };
  
  fetchData()
}, [])

위 코드에서 useState와 useEffect로 비동기 로직을 관리하고 있습니다. 여기서 fetching하는 함수가 더 늘어나면 복잡해지겠죠?

이제 Reacut Query를 사용하는 예제를 보겠습니다.

const { isLoading, error, data } = useQuery('fetchData', () => axios('api 주소')

useState와 useEffect를 사용하지 않고 깔끔하게 변경되었습니다. useQuery가 비동기 로직을 알아서 처리해 우리에게 필요한 값을 사용할 수 있게 반환합니다.

비동기 로직을 쉽게 다루는 목적뿐만 아니라 다른 목적들이 있지만 그건 차후에 예제들과 함께 정리하겠습니다.