TanStack Query(이전의 React Query) 설치 및 사용

Tanstack Query 소개

tanstack query (이전에 React Query)는 React 응용 프로그램에서 데이터 요청 상태를 관리하는 강력한 서점입니다. 데이터를 획득, 저장, 데이터 동기화 및 업데이트하는 프로세스를 단순화하십시오 설치

Tanstack 쿼리를 React 프로젝트에 통합하려면 NPM 또는 원사를 사용하십시오.

또는

개발 도구 (Devotools)를 사용하려면 설치 : >

구성

데이터 요청을 관리하려면 로 응용 프로그램을 래핑하십시오.

와 함께 기본 사용

hook

<code class="language-bash">npm install @tanstack/react-query</code>

는 API에서 데이터를 얻는 것을 용이하게합니다.

돌연변이

<code class="language-bash">yarn add @tanstack/react-query</code>

post, put 또는 delete와 같은 작업을 수행하려면

: >

<code class="language-bash">npm install @tanstack/react-query-devtools</code>

Tanstack Query에서 Fetcher의 중요성 tanstack query는 외부 정보를 얻기 위해 a fetcher

(데이터 소스에 요청을 수행하는 함수)가 필요합니다. Fetcher는 중개자 역할을하여 유연성을 제공하고 코드 청소를 유지합니다. API에 적응하도록 사용자 정의 할 수 있습니다

페치 란 무엇입니까? a fetcher는 다음과 같은 함수입니다 QueryClientProvider 매개 변수를받습니다 (청원 옵션 등) 요청을 작성하십시오 (, 등) 는 데이터 또는 오류로 약속을 반환합니다

<code class="language-javascript">import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
      {/* Opcional: Si instalaste DevTools */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}</code>

fetcher 예 :

결론 useQuery tanstack 쿼리는 React의 데이터 관리를 최적화하여 캐시 및 리발화 시스템으로 성능을 향상시킵니다. 곧 봐요! ?

위 내용은 TanStack Query(이전의 React Query) 설치 및 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!