React useQuery를 사용하여 데이터 가져오기

by

React 애플리케이션에서 데이터를 가져오고 관리하기 위해 useQuery 라이브러리를 사용하는 방법을 알아보겠습니다. useQuery는 데이터 페칭을 간단하게 관리하고 캐싱, 리트라이, 무한 스크롤과 같은 고급 기능을 제공합니다.


단계 1: React Query 설치

React Query를 사용하려면 먼저 해당 라이브러리를 설치해야 합니다. npm을 사용하는 경우 다음 명령어로 설치할 수 있습니다.

npm install react-query


또는 yarn을 사용하는 경우:

yarn add react-query



단계 2: useQuery 훅을 사용하여 데이터 가져오기

React Query를 통해 데이터를 가져오려면 useQuery 훅을 사용합니다. 아래 예제에서는 RESTful API에서 데이터를 가져오는 방법을 보여줍니다.

import React from 'react';
import { useQuery } from 'react-query';

function App() {
  // useQuery 훅을 사용하여 데이터 가져오기
  const { isLoading, error, data } = useQuery('fetchData', fetchData);

  // 데이터 로딩 중
  if (isLoading) {
    return <div>Loading...</div>;
  }

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

  // 데이터 로딩 완료 후 화면에 표시
  return (
    <div>
      <h1>Data from API</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

// fetchData 함수: 데이터 가져오기
async function fetchData() {
  const response = await fetch('/api/data'); // API 엔드포인트에 맞게 수정
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

export default App;

위 코드에서는 useQuery 훅을 사용하여 데이터를 가져오고, 데이터가 로딩 중인 동안 로딩 메시지를 표시하고 오류가 발생한 경우 오류 메시지를 표시합니다. 그렇지 않은 경우 데이터를 화면에 표시합니다.

fetchData 함수에서는 RESTful API로부터 데이터를 가져옵니다. 실제 API 엔드포인트에 따라 코드를 수정해야 합니다.


단계 3: React Query 프로바이더 설정

React Query를 사용하려면 앱 전체에서 QueryClientProvider로 앱을 감싸야 합니다. 이렇게 하면 React Query를 앱에서 사용할 수 있게 됩니다. QueryClientProvider는 앱의 최상위 컴포넌트에 위치해야 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import App from './App';

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root')
);


결론

React Query를 사용하면 데이터를 효과적으로 가져오고 관리할 수 있습니다. 캐싱, 자동 리트라이, 무한 스크롤과 같은 다양한 기능을 활용하여 데이터를 편리하게 처리할 수 있습니다. React Query는 RESTful API나 GraphQL과 같은 다양한 데이터 소스와 함께 사용할 수 있어, React 애플리케이션에서 데이터 페칭을 간편하게 관리할 수 있는 강력한 라이브러리입니다.


Leave a Comment