[실무 React.Js] React-query 데이터 검색/조회하기

React Query는 서버 상태 관리를 쉽게 할 수 있도록 도와주는 강력한 라이브러리입니다. 이 블로그에서는 React Query를 사용한 조회 기능과 저장 기능을 중심으로 사용법을 설명하겠습니다.

React Query 설정

먼저 React Query를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다:

npm install react-query

설치 후, QueryClient와 QueryClientProvider를 설정해야 합니다. 애플리케이션의 루트 컴포넌트에서 이를 설정합니다.

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

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    {/* 나머지 애플리케이션 컴포넌트 */}
  </QueryClientProvider>
);

export default App;

이제 React Query를 사용할 준비가 되었습니다.

조회 기능 구현

React Query의 useQuery 훅을 사용하여 데이터를 조회할 수 있습니다. 아래는 예시 코드입니다:

import React, { useEffect, useRef, useState } from 'react';
import { useQuery } from 'react-query';

// 데이터 조회 함수
const fetchData = async (params) => {
  const response = await fetch(`https://api.example.com/data?${new URLSearchParams(params)}`);
  if (!response.ok) {
    throw new Error('네트워크 응답에 문제가 있습니다');
  }
  return response.json();
};

const DataView = () => {
  const [searchParams, setSearchParams] = useState({});
  const gridRef = useRef();

  // useQuery 훅을 사용하여 데이터를 조회합니다
  const { data, refetch, isFetching } = useQuery(
    ['fetchData', searchParams],
    () => fetchData(searchParams),
    { enabled: false } // 초기에는 비활성화
  );

  // 검색 버튼 클릭 시 호출되는 함수
  const handleSearch = () => {
    const params = {
      key1: 'value1',
      key2: 'value2',
    };
    setSearchParams(params);
    refetch();
  };

  // 검색 파라미터가 변경될 때마다 데이터를 재조회합니다
  useEffect(() => {
    if (Object.keys(searchParams).length > 0) {
      refetch();
    }
  }, [searchParams, refetch]);

  return (
    <div>
      <button onClick={handleSearch}>검색</button>
      {isFetching ? (
        <p>로딩 중...</p>
      ) : (
        <div ref={gridRef}>
          {/* 데이터를 그리드에 표시합니다 */}
          {data?.map((item, index) => (
            <div key={index}>{item.name}</div>
          ))}
        </div>
      )}
    </div>
  );
};

export default DataView;

• fetchData 함수: 서버로부터 데이터를 가져오는 함수입니다.
• useQuery 훅: React Query를 사용하여 데이터를 조회합니다.
• handleSearch 함수: 검색 버튼 클릭 시 호출되어 검색 파라미터를 설정하고 데이터를 재조회합니다.
• useEffect 훅: 검색 파라미터가 변경될 때마다 데이터를 재조회합니다.

: