React-Query란

React-Query는 React 애플리케이션에서 원격 데이터를 관리하기 위한 라이브러리입니다. API 엔드포인트 또는 기타 원격 소스에서 데이터를 쉽게 가져오고, 캐시하고, 업데이트할 수 있는 일련의 후크 및 유틸리티를 제공합니다. React-Query는 복잡한 React 애플리케이션에서 데이터 관리를 단순화하도록 설계되어 선언적이고 구성 가능한 방식으로 데이터를 관리하는 방법을 제공합니다.

React-Query는 데이터 가져오기 및 캐싱과 관련된 많은 복잡성을 추상화하여 애플리케이션 전체에서 데이터를 처리하기 위한 단순하고 일관된 API를 제공합니다. 또한 폴링, 페이지 매김, 다시 가져오기 등 다양한 데이터 로딩 패턴을 지원하므로 광범위한 데이터 관리 요구 사항을 처리할 수 있을 만큼 유연합니다.

React-Query의 주요 기능 중 하나는 캐싱 시스템입니다. 데이터를 자동으로 지능적으로 캐시하여 최신 상태로 유지하고 불필요한 네트워크 요청을 최소화합니다. 캐시 시간 제한 설정, 특정 요청에 대한 캐싱 비활성화 등 특정 요구 사항에 맞게 캐싱 시스템을 구성할 수 있습니다.

또한 React-Query는 API 응답을 받기 전에 UI를 낙관적으로 업데이트할 수 있는 낙관적 업데이트와 데이터가 서버에서 변경될 때 실시간으로 업데이트할 수 있는 실시간 업데이트와 같은 고급 기능을 제공합니다.

React-Query는 Axios, 심지어 GraphQL을 포함한 광범위한 데이터 가져오기 라이브러리와 호환됩니다. 또한 서버에서 렌더링된 애플리케이션과 잘 작동하여 서버에서 데이터를 미리 가져와서 초기 렌더링에 사용하기 위해 클라이언트로 전달하는 방법을 제공합니다.

전반적으로 React-Query는 React 애플리케이션에서 원격 데이터를 관리하기 위한 강력하고 유연한 라이브러리입니다. 데이터 관리를 단순화하고 데이터 처리를 위한 고급 기능을 제공하며 특정 요구 사항에 맞게 사용자 정의할 수 있습니다. React 애플리케이션에서 데이터 관리를 위한 인기 있는 선택이 되었으며 프로덕션 애플리케이션에서 널리 사용됩니다.

React-Query설치 방법

npm 사용시

npm i react-query

yarn 사용시

yarn add react-query

React-Query도입 예시

1.React-Query를 Custome Hooks생성해서 사용해보았다.

import { useQuery } from "react-query";
import { MyBillStatus } from "../api/main";

export const useMyBillStatus = (monthDate: string) => {
    return useQuery(
        ["myBillStatus", monthDate],
        () => MyBillStatus(2, monthDate),
        {
            enabled: !!monthDate
        }
    );
};

고유한 쿼리 키, 이 경우 문자열 "myBillStatus" 및 monthDate 인수를 포함하는 배열입니다.

가져오려는 데이터가 포함된 Promise를 반환하는 함수. 이 경우 2 및 monthDate 인수가 있는 MyBillStatus 함수입니다.

쿼리를 구성하는 데 사용할 수 있는 옵션 개체입니다. 이 경우 monthDate 인수가 진실인지 여부에 따라 enabled 옵션을 부울 값으로 설정합니다.

React-Query의 useQuery 훅을 사용하면 강력한 캐싱 및 데이터 관리 기능을 활용하여 빠르고 반응이 빠른 React 애플리케이션을 구축할 수 있습니다.

2. React-Query Component내에서 사용 방법

import {useMyBillStatus} from "../../hooks/useMyBillStatus"

const App = () => {
const { data: BillStatus, refetch } = useMyBillStatus(
        monthDate.toISOString().slice(0, 7)
    );
    return(
    <PieChart
    	data={[
         BillStatus?.data[4].total,
         BillStatus?.data[3].total,
         BillStatus?.data[2].total
        ]}
      />
    )
    };
    
    export default App;

전반적으로 이 예제는 useMyBillStatus 커스텀 훅을 사용하여 API 함수에서 데이터를 가져오고 React 구성 요소에서 사용하는 방법을 보여줍니다. 이와 같은 사용자 지정 후크를 사용하여 데이터 가져오기 논리를 캡슐화하고 React 애플리케이션에서 데이터를 가져오고 관리하는 데 필요한 코드를 단순화할 수 있습니다.

React-Query 장점

• 데이터 가져오기 간소화: React-Query는 데이터 가져오기를 위한 간단하고 일관된 API를 제공 하여 원격 데이터 처리와 관련된 복잡성을 상당 부분 제거합니다. 또한 폴링, 페이지 매김 및 다 시 가져오기를 비롯한 다양한 데이터 로딩 패턴을 지원합니다.

• 지능적으로 데이터 캐싱: React-Query의 캐싱 시스템은 데이터를 자동으로 캐싱하고 최신 상태 로 유지하여 불필요한 네트워크 요청을 최소화합니다. 캐시 시간 제한 설정 및 특정 요청에 대한 캐싱 비활성화를 포함하여 특정 요구 사항에 맞게 캐싱 시스템을 사용자 지정할 수 있습니 다.

• 고급 기능 제공: React-Query는 API 응답을 받기 전에 UI를 낙관적으로 업데이트할 수 있는 낙관적 업데이트, 데이터가 변경될 때 실시간으로 업데이트할 수 있는 실시간 업데이트와 같은 고 급 기능을 제공합니다. 서버에서.

• 기존 라이브러리와 통합: React-Query는 Axios, 심지어 GraphQL을 포함한 광범 위한 데이터 가져오기 라이브러리와 호환됩니다. 또한 서버에서 렌더링된 애플리케이션과 잘 작동하 여 서버에서 데이터를 미리 가져와서 초기 렌더링에 사용하기 위해 클라이언트로 전달하는 방법을 제공합니다.

• 애플리케이션 성능 향상: 데이터 관리를 단순화하고 불필요한 네트워크 요청을 최소화함으로써 React-Query는 애플리케이션 성능을 개선하고 네트워크 관련 오류의 위험을 줄일 수 있습니다.

• 선언적 데이터 관리 장려: React-Query는 데이터 관리에 대한 선언적 접근 방식을 장려하여 개발자가 해당 데이터를 가져오고 관리하는 구현 세부 사항보다는 필요한 데이터에 집중할 수 있도 록 합니다. 이것은 코드 가독성과 유지보수성을 향상시킬 수 있습니다.

전반적으로 React-Query는 React 애플리케이션에서 원격 데이터를 관리하는 강력하고 유연한 방법을 제공합니다. 데이터 관리를 단순화하고 데이터 처리를 위한 고급 기능을 제공하며 특정 요구 사항에 맞게 사용자 정의할 수 있습니다. 캐싱 시스템, 고급 데이터 로딩 패턴 지원 및 기존 라이브러리와의 호환성으로 인해 React 애플리케이션의 데이터 관리에 널리 사용됩니다.