React Query 데이터베이스 플러그인을 사용하여 자동 데이터 동기화 달성

React Query 데이터베이스 플러그인을 사용하여 자동 데이터 동기화를 달성하세요

프론트 엔드 개발이 점점 복잡해지면서 데이터 관리가 점점 더 중요해지고 있습니다. React Query는 편리한 데이터 상태 관리 및 자동 동기화 기능을 제공하는 강력한 데이터베이스 플러그인입니다. 이 기사에서는 자동 데이터 동기화를 위해 React Query를 활용하는 방법을 살펴보고 구체적인 코드 예제를 제공합니다.

1. React Query 이해

React Query는 React를 기반으로 구축되었으며 사용하기 쉬운 API와 강력한 기능을 제공하는 데이터 관리 및 동기화에 중점을 둔 라이브러리입니다. React Query의 핵심 개념은 쿼리입니다. 쿼리는 원격 데이터를 요청하고, 데이터를 로컬에 저장하며, 데이터 로드, 캐싱 및 동기화를 자동으로 처리할 수 있습니다. 동시에 React Query는 명확한 데이터 상태 관리 및 오류 처리 메커니즘도 제공합니다. 이를 통해 데이터를 보다 간단하고 효율적으로 처리할 수 있습니다.

2. 자동 데이터 동기화 구현

1. React Query 설치

먼저 프로젝트에 React Query를 설치해야 합니다. npm 또는 Yarn을 통해 설치할 수 있습니다.

npm install react-query
# 或者
yarn add react-query

설치가 완료된 후 애플리케이션 루트 구성 요소에서 React Query를 가져옵니다.

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

2. Create QueryClient

애플리케이션에서 QueryClient 인스턴스를 생성하여 데이터 요청 및 상태를 관리합니다.

const queryClient = new QueryClient();

이를 QueryClientProvider에 래핑하여 애플리케이션 전체에서 QueryClient가 제공하는 기능에 액세스합니다.

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

3. 쿼리 선언

데이터를 사용해야 하는 구성 요소에서는 useQuery 후크를 사용하여 쿼리를 선언할 수 있습니다. useQuery는 원격 서버에서 데이터를 가져오기 위한 쿼리 키와 비동기 함수를 받습니다.

import { useQuery } from 'react-query';

function MyComponent() {
  const { data, isLoading } = useQuery('todos', fetchTodos);

  if (isLoading) {
    return <LoadingSpinner />;
  }

  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

async function fetchTodos() {
  const response = await fetch('/api/todos');
  const data = await response.json();
  return data;
}

이 예에서는 서버에서 할 일 데이터 가져오기에서 fetchTodos 함수를 호출하는 "todos"라는 쿼리를 선언합니다. 데이터가 로드되는 동안 로드 스피너를 표시하고, 로드가 완료되면 할 일 목록을 렌더링합니다.

4. Update data

React Query는 데이터 로드 및 캐싱을 자동으로 처리할 수 있지만, 데이터를 실시간으로 유지하려면 데이터 업데이트를 수동으로 처리해야 합니다. useMutation 후크를 사용하여 데이터 업데이트 작업을 쉽게 구현할 수 있습니다.

import { useMutation } from 'react-query';

function MyComponent() {
  const { data, isLoading } = useQuery('todos', fetchTodos);
  const mutation = useMutation(updateTodo);

  async function handleUpdate(id, status) {
    await mutation.mutateAsync({ id, status });
  }

  if (isLoading) {
    return <LoadingSpinner />;
  }

  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>
          {todo.title}
          <button onClick={() => handleUpdate(todo.id, 'completed')}>
            完成
          </button>
        </li>
      ))}
    </ul>
  );
}

async function updateTodo({ id, status }) {
  await fetch(`/api/todos/${id}`, {
    method: 'PUT',
    body: JSON.stringify({ status }),
    headers: { 'Content-Type': 'application/json' },
  });
}

이 예에서는 useMutation 후크를 사용하여 데이터가 업데이트될 때 호출되는 함수가 포함된 mutation이라는 변수를 선언합니다. 버튼을 클릭하여 handlerUpdate 함수를 트리거하고 해당 할 일 항목을 완료한 후 서버에 업데이트 요청을 보냅니다.

5. 자동으로 데이터 동기화

React Query는 자동 동기화 기능도 제공하므로 데이터가 변경되면 인터페이스를 자동으로 업데이트할 수 있습니다. useQuery 구성 항목의 refetchOnMount 및 refetchInterval 옵션을 사용하여 데이터 쿼리 및 업데이트를 자동으로 트리거할 수 있습니다.

function MyComponent() {
  const { data, isLoading } = useQuery('todos', fetchTodos, {
    refetchOnMount: true,
    refetchInterval: 3000, // 每 3 秒自动更新一次数据
  });

  // ...
}

이 예에서는 refetchOnMount를 true로 설정했습니다. 이는 구성 요소가 처음으로 마운트될 때 데이터 쿼리가 트리거된다는 의미입니다. 동시에 refetchInterval을 3000으로 설정했습니다. 이는 데이터 자동 업데이트를 실현하기 위해 3초마다 데이터 쿼리가 트리거된다는 의미입니다.

3. 요약

React Query 데이터베이스 플러그인을 사용하면 데이터의 자동 동기화 기능을 쉽게 구현할 수 있습니다. 이 글에서는 React Query의 기본 사용법을 간략하게 소개하고 구체적인 코드 예시를 제공합니다. 이 글이 여러분이 React Query를 더 잘 이해하고 활용하며, 실제 프로젝트에서 역할을 수행하는 데 도움이 되기를 바랍니다.

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