[React - 19] React Query - useQuery

useQuery는 보통 React에서 데이터 fetching을 위한 라이브러리인 react-query에서 참조됩니다.

react-query는 비동기 데이터의 fetching, caching, synchronization 및 updates를 처리하기 위한 도구를 제공합니다.

useQuery는 가장 기본적인 hook 중 하나로, 원격 데이터를 조회할 때 사용됩니다. 

아래는 useQuery의 기본 사용 방법입니다

---

react-query 설치하기

npm install react-query

ReactQueryClientProvider 설정하기

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

useQuery 사용

import { useQuery } from 'react-query';

function YourComponent() {
  const { data, error, isLoading } = useQuery('yourQueryKey', fetchDataFunction);

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

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

  return (
    <div>
      {/* Render your data */}
      {data && <div>{data.someProperty}</div>}
    </div>
  );
}

// 예시 데이터 fetching 함수
async function fetchDataFunction() {
  const response = await fetch('https://api.yourendpoint.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

위 코드에서..

 

yourQueryKey

쿼리의 키로, 캐싱을 위한 식별자 역할을 합니다.

fetchDataFunction

데이터를 가져오는 함수입니다. 이 함수는 Promise를 반환해야 합니다.

data

응답 데이터입니다.

 

error

오류 객체입니다.

 

isLoading

데이터를 로드 중인지의 상태를 나타내는 boolean입니다.

(기본값은 True이며 페칭 함수가 모두 완료 되면 false로 변합니다.)

---

react-query는 많은 다른 기능과 구성 옵션을 제공하므로, 

공식 문서를 참조하여 더 많은 정보와 사용 방법을 확인하는 것이 좋습니다.