React Query 데이터베이스 플러그인을 사용한 실시간 데이터 업데이트

실시간 데이터 업데이트를 위해 React Query 데이터베이스 플러그인을 사용하세요

React Query는 React 애플리케이션에서 데이터 처리 프로세스를 단순화하는 데 도움이 되는 강력한 데이터 관리 도구입니다. 데이터 검색, 캐싱, 업데이트와 같은 작업을 위한 우아한 솔루션을 제공합니다. 이 글에서는 React Query 플러그인을 사용하여 실시간 데이터 업데이트 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

이 프로세스를 더 잘 이해하기 위해 간단한 작업 관리 애플리케이션을 예로 들어 보겠습니다. 애플리케이션에 작업 목록이 있다고 가정해 보겠습니다. 사용자가 작업을 완료하면 작업 상태를 실시간으로 업데이트해야 합니다.

먼저 React Query 플러그인을 설치해야 합니다. 터미널에서 다음 명령을 실행하세요.

npm install react-query

설치가 완료되면 애플리케이션의 루트 구성 요소에 React Query를 도입하고 글로벌 QueryClient 인스턴스를 생성할 수 있습니다. 코드는 다음과 같습니다.

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用组件 */}
    </QueryClientProvider>
  );
}

export default App;

다음으로 실시간으로 데이터를 업데이트해야 하는 컴포넌트에서 React Query에서 제공하는 useMutation Hook을 이용하여 데이터 업데이트 작업을 생성합니다. 작업 완료 버튼의 클릭 이벤트 핸들러에서 업데이트 논리를 정의할 수 있습니다. 구체적인 코드는 다음과 같습니다.

import { useMutation, useQueryClient } from 'react-query';

function TaskItem({ task }) {
  const queryClient = useQueryClient();

  const completeTaskMutation = useMutation(async () => {
    // 发送异步请求完成任务
    await fetch(`/api/tasks/${task.id}`, { method: 'PUT', body: JSON.stringify({ completed: true }) });

    // 手动更新缓存
    queryClient.setQueryData(['tasks', task.id], { ...task, completed: true });
  });

  const handleCompleteClick = () => {
    completeTaskMutation.mutate();
  }

  return (
    <div>
      <p>{task.name}</p>
      <button onClick={handleCompleteClick}>完成</button>
    </div>
  );
}

이 코드에서는 먼저 useMutation을 호출하여 CompleteTaskMutation이라는 변수를 생성합니다. 데이터 업데이트 작업을 트리거하는 데 사용되는 mutate 함수를 포함하는 개체입니다.

버튼의 클릭 이벤트 핸들러에서 CompleteTaskMutation.mutate()를 호출하여 데이터 업데이트를 트리거합니다. 이는 useMutation에 전달한 비동기 함수를 호출하고 비동기 요청을 완료한 후 캐시의 데이터를 수동으로 업데이트합니다. 여기서는 setQueryData 메서드를 사용하여 캐시의 작업 데이터를 업데이트하고 ['tasks', task.id]를 첫 번째 매개변수로 전달하여 이것이 작업 목록에 대한 쿼리 작업임을 나타냅니다.

마지막으로 작업 목록 구성 요소에서는 useQuery 후크를 사용하여 작업 데이터를 얻습니다. 코드는 다음과 같습니다:

import { useQuery } from 'react-query';

function TaskList() {
  const { data } = useQuery('tasks', async () => {
    const response = await fetch('/api/tasks');
    const data = await response.json();
    return data;
  });

  return (
    <div>
      {data && data.map(task => (
        <TaskItem key={task.id} task={task} />
      ))}
    </div>
  );
}

이 코드에서는 useQuery('tasks', ...)를 호출하여 쿼리 작업을 시작합니다. 첫 번째 매개변수는 쿼리를 식별하는 데 사용되는 키입니다. 여기서는 'tasks'를 사용합니다. 두 번째 매개변수는 작업 목록 데이터를 가져오는 데 사용되는 비동기 함수입니다. 이 함수에서 비동기 요청을 보내고 응답 데이터를 반환할 수 있습니다. React Query는 이 데이터를 자동으로 캐시하고 필요할 때 업데이트합니다.

위의 코드 예시를 통해 React Query 플러그인을 사용하여 실시간 데이터 업데이트 기능을 성공적으로 구현했습니다. 새로운 데이터를 생성하든, 데이터를 업데이트하든, 데이터를 삭제하든, React Query는 데이터 수집 및 업데이트 프로세스를 관리하는 데 도움이 되어 애플리케이션에서 데이터 처리의 복잡성을 크게 단순화할 수 있습니다. 이 글이 여러분이 React Query를 사용하는 방법을 배우는 데 도움이 되기를 바랍니다!

위 내용은 React Query 데이터베이스 플러그인을 사용한 실시간 데이터 업데이트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!