React 쿼리 및 데이터베이스를 사용한 데이터 관리: 모범 사례 가이드

React 쿼리 및 데이터베이스를 사용한 데이터 관리: 모범 사례 가이드

인용문:
현대 프런트엔드 개발에서 데이터 관리는 매우 중요한 작업입니다. 고성능과 안정성에 대한 사용자의 요구가 계속 증가함에 따라 애플리케이션 데이터를 보다 효과적으로 구성하고 관리하는 방법을 고려해야 합니다. React Query는 데이터 검색, 업데이트 및 캐싱을 처리하는 간단하고 유연한 방법을 제공하는 강력하고 사용하기 쉬운 데이터 관리 도구입니다. 이 글에서는 React Query와 데이터베이스를 사용한 데이터 관리 모범 사례를 설명하고 구체적인 코드 예제를 제공합니다.

1. React Query 및 관련 종속성 설치
먼저 React Query 및 관련 종속성을 설치해야 합니다. 이러한 패키지는 npm 또는 Yarn을 사용하여 설치할 수 있습니다.

$ npm install react-query react-router-dom

2. React QueryProvider 구성
항목 파일에서 애플리케이션에 React QueryProvider를 추가해야 합니다. React QueryProvider는 애플리케이션의 구성 요소에 데이터 관리 관련 컨텍스트를 제공하는 역할을 담당합니다.

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

const queryClient = new QueryClient();

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

3. 쿼리 요청 시작
React Query에서는 useQuery 후크를 사용하여 쿼리 요청을 시작할 수 있습니다. useQuery 후크의 첫 번째 매개변수는 가져올 데이터의 키를 나타내는 문자열입니다. 두 번째 매개변수는 실제로 데이터를 가져오는 데 사용되는 비동기 함수입니다.

import { useQuery } from 'react-query';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

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

  if (error) {
    return <div>Error: {error.message}</div>;
  }

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

4. 데이터 업데이트
데이터를 얻는 것 외에도 React Query는 데이터 업데이트를 처리하기 위한 useMutation 후크도 제공합니다. useMutation 후크는 실제로 데이터를 업데이트하는 데 사용되는 비동기 함수를 허용합니다. 첫 번째 요소가 업데이트 작업을 트리거하는 함수인 배열을 반환합니다. 또한 업데이트 요청을 실행할 때 일부 옵션을 사용하여 동작을 제어할 수도 있습니다.

import { useMutation } from 'react-query';

function UpdateUserForm({ user }) {
  const mutation = useMutation(updatedUser => {
    return fetch(`/api/users/${user.id}`, {
      method: 'PUT',
      body: JSON.stringify(updatedUser),
    });
  });

  const handleSubmit = event => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const updatedUser = {
      name: formData.get('name'),
      age: formData.get('age'),
    };
    mutation.mutate(updatedUser);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" defaultValue={user.name} />
      <input type="number" name="age" defaultValue={user.age} />
      <button type="submit">Update</button>
    </form>
  );
}

5. 데이터 캐싱
React Query는 기본적으로 쿼리된 데이터를 자동으로 캐시하고 필요할 때 업데이트합니다. useQueryClient 후크 및 queryClient.setQueryData 메소드를 사용하여 데이터를 수동으로 업데이트할 수 있습니다. 쿼리된 키로 데이터를 식별하고 업데이트합니다.

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

function UserList() {
  const queryClient = useQueryClient();

  const { isLoading, data, error } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    const data = await response.json();
    return data;
  });

  const handleUpdateUser = user => {
    // update the data in the cache
    queryClient.setQueryData('users', old => {
      const updatedData = old.map(u => {
        if (u.id === user.id) {
          return {
            ...u,
            name: user.name,
            age: user.age,
          };
        }
        return u;
      });
      return updatedData;
    });
  };

  // ...
}

6. 데이터베이스 사용
React 쿼리는 데이터를 얻는 데 사용하는 방법을 제한하지 않습니다. 데이터가 데이터베이스에 저장되어 있는 경우 쿼리 함수에 해당 코드를 작성하기만 하면 데이터베이스를 작동할 수 있습니다.

import { useQuery } from 'react-query';
import { db } from 'path/to/database';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const users = await db.get('users');
    return users;
  });

  // ...
}

Seven.Summary
React Query와 데이터베이스를 사용하면 애플리케이션의 데이터를 더 잘 구성하고 관리할 수 있으며 좋은 사용자 경험을 제공할 수 있습니다. 이 문서에서는 구체적인 코드 예제와 함께 React 쿼리를 사용한 데이터 관리에 대한 모범 사례 지침을 제공합니다. 이것이 당신에게 도움이 되기를 바랍니다!

위 내용은 React 쿼리 및 데이터베이스를 사용한 데이터 관리: 모범 사례 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!