React 쿼리 데이터베이스 통합 가이드: 빠른 시작 튜토리얼

React Query 데이터베이스 통합 가이드: 빠른 시작 튜토리얼

소개:
React Query는 애플리케이션 데이터를 관리하고 쿼리하는 간단하고 효율적인 방법을 제공하는 강력한 데이터 쿼리 라이브러리입니다. 디자인 컨셉은 Hooks를 기반으로 하므로 React 애플리케이션에서 사용하기가 매우 간단합니다. 이 가이드에서는 데이터를 빠르게 쿼리하고 업데이트할 수 있도록 React Query를 데이터베이스와 통합하는 데 중점을 둘 것입니다.

1. React Query 설치 및 설정
먼저 React Query를 설치해야 합니다. 터미널을 열고 프로젝트 디렉터리에서 다음 명령을 실행하세요.

npm install react-query

설치가 완료되면 애플리케이션의 루트 구성 요소에서 React Query에 대한 공급자를 설정해야 합니다. 루트 구성 요소에 다음 코드를 추가하세요.

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

const queryClient = new QueryClient();

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

이제 React 앱에 React Query가 통합되었습니다!

2. 데이터베이스 통합 레이어 생성
다음으로 데이터 작업을 관리하기 위한 데이터베이스 통합 레이어를 생성하겠습니다. 이 예에서는 가상의 데이터베이스 API를 사용하겠습니다. 프로젝트에서 api.js라는 파일을 생성하고 다음 코드를 추가합니다: api.js 的文件，并添加以下代码：

export async function fetchUsers() {
  // 发送请求获取用户数据
}

export async function deleteUser(id) {
  // 发送请求删除指定 id 的用户
}

export async function updateUser(id, data) {
  // 发送请求更新指定 id 的用户数据
}

export async function createUser(data) {
  // 发送请求创建新用户
}

在这个文件中，我们分别定义了获取用户、删除用户、更新用户和创建用户的函数。根据你的实际情况，你可能需要调整这些函数的实现细节。

三、使用 React Query 进行数据查询
现在我们可以开始使用 React Query 进行数据查询了。在你的组件中，导入所需的 Hooks，并使用它们来查询数据。以下是一个查询用户列表的示例：

import { useQuery } from 'react-query';

import { fetchUsers } from './api';

function UserList() {
  const { data, isLoading, isError } = useQuery('users', fetchUsers);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error occurred while fetching data.</div>;
  }

  return (
    <div>
      {data.map((user) => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
}

在这个示例中，我们使用 useQuery Hook 来查询用户数据。第一个参数是一个字符串，用于标识查询的键值。第二个参数是一个函数，在其中调用我们之前定义的 fetchUsers 函数来获取用户数据。useQuery Hook 将返回一个包含查询结果的对象，我们可以从中获取数据、加载状态和错误状态。

四、使用 React Query 进行数据更新
除了查询数据，React Query 还提供了用于更新数据的 Hook。在你的组件中，导入 useMutation Hook 并使用它来更新用户数据。以下是一个更新用户的示例：

import { useMutation } from 'react-query';

import { updateUser } from './api';

function UserForm({ user }) {
  const mutation = useMutation((data) => updateUser(user.id, data));

  const handleSubmit = (event) => {
    event.preventDefault();

    const formData = new FormData(event.target);
    const userData = Object.fromEntries(formData.entries());

    mutation.mutate(userData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" defaultValue={user.name} />
      <input type="text" name="email" defaultValue={user.email} />
      <button type="submit" disabled={mutation.isLoading}>
        {mutation.isLoading ? 'Saving...' : 'Save'}
      </button>
    </form>
  );
}

在这个示例中，我们使用 useMutation Hook 来进行用户数据的更新。我们将 updateUser 函数传递给 useMutation，它将返回一个包含 mutate 函数的对象。我们在表单提交时调用 mutation.mutaterrreee

이 파일에는 각각 사용자 가져오기, 사용자 삭제, 사용자 업데이트 및 사용자 생성 기능이 정의되어 있습니다. 실제 상황에 따라 이러한 기능의 구현 세부 사항을 조정해야 할 수도 있습니다.

3. 데이터 쿼리에 React Query 사용

이제 데이터 쿼리에 React Query를 사용할 수 있습니다. 구성 요소에서 필요한 후크를 가져와 이를 사용하여 데이터를 쿼리합니다. 다음은 사용자 목록을 쿼리하는 예입니다. 🎜rrreee🎜이 예에서는 useQuery 후크를 사용하여 사용자 데이터를 쿼리합니다. 첫 번째 매개변수는 쿼리의 키 값을 식별하는 문자열입니다. 두 번째 매개변수는 앞서 정의한 fetchUsers 함수를 호출하여 사용자 데이터를 가져오는 함수입니다. useQuery 후크는 데이터, 로드 상태 및 오류 상태를 가져올 수 있는 쿼리 결과가 포함된 개체를 반환합니다. 🎜🎜4. 데이터 업데이트를 위해 React Query 사용🎜 React Query는 데이터 쿼리 외에도 데이터 업데이트를 위한 Hooks도 제공합니다. 구성 요소에서 useMutation 후크를 가져와 이를 사용하여 사용자 데이터를 업데이트합니다. 다음은 사용자 업데이트의 예입니다. 🎜rrreee🎜이 예에서는 useMutation Hook을 사용하여 사용자 데이터를 업데이트합니다. updateUser 함수를 useMutation에 전달하면 mutate 함수가 포함된 객체가 반환됩니다. 양식이 제출되면 mutation.mutate 함수를 호출하여 양식 데이터를 매개변수로 전달하여 데이터 업데이트를 트리거합니다. 🎜🎜결론: 🎜이 가이드에서는 빠른 데이터 쿼리 및 업데이트를 달성하기 위해 React 애플리케이션에서 React 쿼리와 데이터베이스를 통합하는 방법을 소개합니다. 위의 단계를 따르면 데이터 관리를 위해 React Query를 쉽게 활용할 수 있습니다. 이 기사가 도움이 되기를 바랍니다! 🎜

위 내용은 React 쿼리 데이터베이스 통합 가이드: 빠른 시작 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!