[React] React query 개념 및 예제

리액트에서 작업을할때 fetch 나 axios 같은 라이브러리로 데이터를 패칭 해올때 보통 3가지의 state 관리를 해야합니다/

isLoading , error , 그리고 마지막으로 get 해올 데이터.

 

데이터를 갖고오기까지의 로딩일때는 isLoading ,fetching이 실패할 경우 error 핸들링 처리 , 마지막으로 API에서 실제 화면에 뿌려줄 데이터.

 

단순히 API get 콜을 해서 화면에 뿌려주는 건데 로직이 약간 귀찮을 수 있습니다.

 

아래는 리액트 쿼리를 쓰기전의 흔한 데이터 fetching 해오는 jsx코드 입니다.

import { useState, useEffect } from 'react';

function UserList() {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    setIsLoading(true);
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
        setIsLoading(false);
        setUsers(data);
      })
      .catch(err => {
        setIsLoading(false);
        setError(err);
      });
  }, []);

  if (isLoading) return <div>Loading...</div>;

  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

 

React query

이런식의 로직이 귀찮은경우 , React query를 이용하면 더욱 쉽게 코드를 짤수있고 , 이 뿐만이 아니라 아래와 같은 장점들도 있습니다.

 

1. 캐싱: React Query는 자동으로 데이터를 캐싱하므로, 동일한 요청을 여러 번 보내지 않아도 되어 성능이 향상
2. 재사용성: React Query는 여러 컴포넌트에서 동일한 데이터를 사용할 수 있도록 데이터 로딩과 관련된 로직을 추상화하므로, 코드의 재사용성이 높아짐
3. 에러 처리: React Query는 데이터 로딩에 실패한 경우 자동으로 에러 처리를 해주므로, 개발자는 별도로 에러 처리를 구현할 필요 없음
4. 최적화: React Query는 데이터 로딩과 관련된 로직을 최적화하여, 성능을 향상.

1번째의 캐싱을 덧붙혀서 설명 하자면..

 

React Query에서 말하는 "캐싱(Caching)"은 이전에 요청된 데이터를 저장하고, 다음 요청 시에는 저장된 데이터를 사용하는 것을 말합니다. 이를 통해 서버로부터 데이터를 다시 받아오지 않아도 되므로, 성능상의 이점을 가져올 수 있습니다.

React Query에서는 이전에 요청된 데이터를 자동으로 캐싱하며, 이를 "캐시(Cache)"라고 합니다. 캐시는 일반적으로 메모리나 디스크와 같은 빠른 저장소에 저장됩니다. 이를 통해, 다음 요청 시에는 빠르게 데이터를 제공할 수 있습니다.

또한, React Query에서는 캐시를 자동으로 만료시켜서 새로운 데이터를 요청할 수 있도록 합니다. 이를 "캐시 만료(Cache Expiration)"라고 합니다. 만료 시간은 사용자가 지정할 수 있으며, 기본값은 캐시된 데이터의 유효 기간이 만료될 때까지입니다.

따라서 React Query에서 캐싱은 성능을 향상시키는 중요한 기능 중 하나이며, 개발자들이 일일히 캐시를 구현할 필요 없이 자동으로 처리됩니다.

 

아래 예제는 useQuery 훅을 사용하여 데이터를 가져오고, 로딩 중일 때는 'Loading...'을, 에러 발생 시는 에러 메시지를 출력하고, 성공적으로 데이터를 가져오면 사용자 리스트를 렌더링을 합니다.

 이렇게 React Query를 사용하면 데이터 로딩과 관련된 로직을 간단하게 처리할 수 있다 위 예제에서는 useQuery를 이용하여  데이터를 가져오고 있습니다. data, isLoading, error 등의 값을 이용하여 UI를 업데이트를 할수있습니다.

import { useQuery } from 'react-query';

function UserList() {
  const { isLoading, error, data } = useQuery('users', () =>
    fetch('https://jsonplaceholder.typicode.com/users').then(res =>
      res.json()
    )
  );

  if (isLoading) return <div>Loading...</div>;

  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

useQuery의 첫번째 인자로는 식별할 key 값 , 두번째 인자는 fetcher 함수를 넣어주면 됩니다.

fetcher 함수는 위 코드처럼 안넣고 utils.ts 같은 파일에 함수를 export 하고 import 해서 방법으로 하면 코드가 깔끔해집니다.

 

useMutation 훅도 있으니 공부를해보자~~