axios 와 data fetching 툴을 같이 쓰는 이유

실제 사용을 위한 서비스들은 대부분 swr이나 react-query와 함께 비동기 통신을 묶어서 쓰는데 그 이유가 뭘까?

먼저 첫번째는 비동기 처리 상태에 따른 상태처리가 용이하다는 점이다.

 

const Component = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState({});
  const [dataError, setDataError] = useState('404');
  
  //...
}

 

일반적인 비동기 통신 처리 이후에는 사이드 이펙트 처리를 통해 무려 3개의 상태를 만들면서 성공했을 시의 데이터, 패칭이 끝났는지 확인, 에러가 났다면 에러의 종류 등을 각각 관리해줘야한다. 데이터 패칭 도구 중 react-query를 사용하면 비동기 처리에 대한 여러 상태를 한번에 처리하는 것이 가능하다.

 

const Component = () => {
  const { status, data: userData, error, isFetching } = useQuery(['user'], async() => {/*..*/});
}

 

코드의 양뿐만 아니라 그 외에도 많은 효능과 효험이 있다.

 

캐싱을 효율적으로 관리해준다. (중복 제거에 매우 용이)
디바운스, 스로틀링을 통해 오래된 데이터를 업데이트 해준다.
페이징, 지연 로딩 등을 적용하여 성능 최적화가 가능하다.
자체 GC로 메모리 관리에도 용이하다.

 

개인적으로 유용하다고 생각하는 부분은 바로 useQueries

 

useQueries

여러 비동기 처리를 다룰 때, Promise.all()을 해시맵과 사용해서 병렬처리랑 순서보장을 어렵게 어렵게 돌려서 해야되는 경우가 있는데 useQueries는 순서도 보장해주는 병렬처리를 지원해준다.

 

// useQuery를 여러개 중첩하는 경우 (이 경우도 병렬처리가 지원된다.)

const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams })
const projectsQuery = useQuery({ queryKey: ['projects'], queryFn: fetchProjects })

// useQueries를 사용하는 경우

const userQueries = useQueries({
    queries: users.map((user) => {
      return {
        queryKey: ['user', user.id],
        queryFn: () => fetchUserById(user.id),
      }
    }),
  });