React Query의 useQuery를 활용한 데이터 조회 및 상태 관리

React Query는 서버 상태 관리를 위한 도구로, 그 중 useQuery 훅은 서버에서 데이터를 가져오고, 그 데이터를 상태로 관리하며, 데이터를 가져오는 동안 로딩, 에러 처리 등을 쉽게 할 수 있도록 도와줍니다.

 

이번 글에서는 useQuery 훅을 사용하여 데이터를 조회하고, 상태를 관리하는 방법에 대해서 알아보겠습니다.

 

 

 

useQuery의 기본 사용법

const { data, error, ... } = useQuery(queryKey, queryFn);

• queryKey:
  • 이 키는 React Query가 캐시를 식별하고 관리하는 데 사용됩니다. 동일한 키를 가진 쿼리는 캐시된 데이터를 공유하게되죠.
• queryFn:
  • 데이터를 조회하는 함수입니다. 이 함수는 서버에서 데이터를 가져오고, 그 결과를 반환합니다.

 

 

useQuery를 활용한 검색 구현 예시

const searchImageQuery = useQuery({
  queryKey: ["images", searchInput],
  queryFn: () => searchFiles(searchInput),
});

• queryKey:
  • "images"와 searchInput을 조합하여 이 쿼리를 고유하게 식별합니다. 이 키는 React Query가 캐시 데이터를 관리하는 데 사용됩니다. 
  • searchInput이 변경되면 새로운 키가 생성되고, 이에 따라 새로운 서버 요청을 보냅니다.
• queryFn:
  • 서버에서 파일을 검색하는 함수로, 이 예시에서는 searchFiles(searchInput)함수를 사용하여 파일을 가져옵니다.

 

 

검색 결과와 상태 처리 예시

useQuery는 데이터를 가져오는 동안 다양한 상태를 제공합니다. 이를 활용해 UI에 로딩 상태나 에러 메시지를 표시할 수 있습니다.

return (
  <section>
    {searchImageQuery.isPending && <Spinner />}
    {searchImageQuery.isError && <div>Error loading files</div>}
    {searchImageQuery.data &&
      searchImageQuery.data.map((image) => (
        <Image key={image.id} image={image} />
      ))}
  </section>
);

• 로딩 상태 처리:
  • searchImageQuery.isPending이 true일 때 로딩 스피너를 표시해, 사용자가 데이터를 기다리는 동안 시각적인 피드백을 받을 수 있도록 할 수 있습니다.
• 에러 상태 처리:
  • searchImageQuery.isError가 true일 경우, 에러 메시지를 표시해, 데이터를 가져오는 중 문제가 발생했음을 알릴 수 있습니다.
• 데이터 렌더링:
  • searchImageQuery.data가 존재하면, 조회가 완료된 것이므로 검색된 파일 리스트를 Image 컴포넌트를 통해 렌더링 할 수 있습니다.

 

 

마무리

예시를 통해 파일 검색 작업을 어떻게 구현하고, 로딩 상태와 에러 상태를 관리하는지를 살펴보았습니다. 이처럼 React Query의 useQuery 훅을 사용하면 서버 상태 관리를 간편하게 다룰 수 있습니다.