Axios 및 React 쿼리를 사용한 React CRUD 작업

이전 기사인 사용자 정의 후크를 사용하여 React에서 HTTP 요청 단순화?에서 사용자 정의 후크를 사용하여 HTTP 요청을 단순화하는 방법을 살펴보았습니다. 소규모 애플리케이션에는 효과적이지만 React 앱이 확장됨에 따라 이 접근 방식을 유지하기가 더 어려워질 수 있습니다. 이 글에서는 Axios와 React Query를 사용하여 확장 가능한 방식으로 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 처리하는 방법을 살펴보겠습니다.

Axios와 React 쿼리가 필요한 이유

• Axios: 브라우저 및 Node.js용 Promise 기반 HTTP 클라이언트인 Axios는 깔끔하고 읽기 쉬운 코드를 사용하여 비동기 HTTP 요청을 REST 엔드포인트로 보내는 작업을 단순화합니다.

• React 쿼리: React에서 데이터 동기화, 캐싱 및 상태 관리를 향상시키는 강력한 데이터 가져오기 라이브러리입니다. React Query는 데이터 가져오기를 자동화하는 동시에 로딩 및 오류 상태를 더 효율적으로 제어합니다.

Axios 및 React 쿼리 설정

먼저 필요한 패키지를 설치하세요.

npm install axios react-query react-router-dom

앱에서 React 쿼리 설정

다음으로 항목 파일(App.tsx)에서 React Query를 구성하여 애플리케이션의 전역 쿼리 설정을 관리하세요.

// src/App.tsx
import { QueryClient, QueryClientProvider } from 'react-query';
import { CustomRouter } from './Router';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,  // Prevent refetch on tab/window switch
      retry: 1,                     // Retry failed queries once
    },
  },
});

const App: React.FC = () => (
  <QueryClientProvider client={queryClient}>
    <CustomRouter />
  </QueryClientProvider>
);

export default App;

인터셉터를 사용하여 Axios 설정

전역적으로 인증을 처리하기 위해 Axios 인스턴스를 생성하고 인터셉터를 사용하여 인증된 요청에 대한 Authorization 헤더를 첨부할 수 있습니다.

// src/config/axiosApi.ts
import axios from 'axios';

const authenticatedApi = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL,  // Environment-specific base URL
  headers: {
    'Content-Type': 'application/json',
  },
});

// Attach Authorization token to requests if present
authenticatedApi.interceptors.request.use((config) => {
  const token = localStorage.getItem('crud-app-auth-token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export { authenticatedApi };

CRUD 작업을 위한 API 함수 생성

Axios를 사용하여 CRUD 작업을 수행하기 위해 API와 상호 작용하는 함수를 정의해 보겠습니다.

// src/data/api/post.ts
import { authenticatedApi } from '../../config/axiosApi';

// Error handler function to standardize error messages
export const handleApiError = (error: any): never => {
  if (error.message === 'Network Error') {
    throw new Error('Network Error. Please try again later.');
  } else if (error.response?.data?.error) {
    throw new Error(error.response.data.error);
  } else if (error.response) {
    throw new Error('A server error occurred.');
  } else {
    throw new Error(error.message || 'An unknown error occurred.');
  }
};

// General function to handle API requests
export const apiCall = async <T>(
  method: 'get' | 'post' | 'put' | 'delete',
  url: string,
  data?: any,
): Promise<T> => {
  try {
    const response = await authenticatedApi[method](url, data);
    return response.data;
  } catch (error) {
    throw handleApiError(error);
  }
};

// CRUD functions for the post feed
export const createPostApi = (post: any) => apiCall<any>('post', 'posts', post);
export const getPostsApi = () => apiCall<any>('get', 'posts');
export const updatePostApi = (id: string, post: any) => apiCall<any>('put', `posts/${id}`, post);
export const deletePostApi = (id: string) => apiCall<any>('delete', `posts/${id}`);

CRUD 작업에 React 쿼리 후크 사용

이제 API 기능이 있으므로 React Query를 사용하여 이러한 작업에 대한 상태 관리 및 데이터 가져오기를 처리할 수 있습니다.

// src/data/hooks/post.ts
import { useMutation, useQuery, useQueryClient } from 'react-query';
import { createPostApi, getPostsApi, updatePostApi, deletePostApi } from '../api/post';

// Custom hooks for CRUD operations
export const useCreatePostApi = () => {
  const queryClient = useQueryClient();
  return useMutation(createPostApi, {
    onSuccess: () => queryClient.invalidateQueries(['posts']), // Refetch posts after a new post is created
  });
};

export const useGetPostsApi = () => useQuery(['posts'], getPostsApi);

export const useUpdatePostApi = () => {
  const queryClient = useQueryClient();
  return useMutation(updatePostApi, {
    onSuccess: () => queryClient.invalidateQueries(['posts']), // Refetch posts after an update
  });
};

export const useDeletePostApi = () => {
  const queryClient = useQueryClient();
  return useMutation(deletePostApi, {
    onSuccess: () => queryClient.invalidateQueries(['posts']), // Refetch posts after deletion
  });
};

구성 요소에서 CRUD 후크 사용

마지막으로 사용자 정의 후크를 사용하고 사용자가 게시물을 생성, 편집, 삭제할 수 있는 간단한 구성 요소를 구축할 수 있습니다.

// src/components/PostCard.tsx
import React, { useState } from 'react';
import { useGetPostsApi, useDeletePostApi, useUpdatePostApi, useCreatePostApi } from '../data/hooks/post';
import { toast } from '../components/Toast';  // Assume a toast component exists

const PostCard: React.FC = () => {
  const { data: posts, isLoading, error } = useGetPostsApi();
  const deletePost = useDeletePostApi();
  const updatePost = useUpdatePostApi();
  const createPost = useCreatePostApi();
  const [newPost, setNewPost] = useState({ title: '', content: '' });

  const handleCreate = async () => {
    try {
      await createPost.mutateAsync(newPost);
      setNewPost({ title: '', content: '' });
      toast.success('Post created successfully');
    } catch (error) {
      toast.error(error.message);
    }
  };

  const handleDelete = async (id: string) => {
    try {
      await deletePost.mutateAsync(id);
      toast.success('Post deleted successfully');
    } catch (error) {
      toast.error(error.message);
    }
  };

  const handleEdit = async (id: string, updatedPost: any) => {
    try {
      await updatePost.mutateAsync({ id, ...updatedPost });
      toast.success('Post updated successfully');
    } catch (error) {
      toast.error(error.message);
    }
  };

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

  return (
    <div>
      <div>
        <input
          type="text"
          value={newPost.title}
          onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
          placeholder="Title"
        />
        <input
          type="text"
          value={newPost.content}
          onChange={(e) => setNewPost({ ...newPost, content: e.target.value })}
          placeholder="Content"
        />
        <button onClick={handleCreate} disabled={createPost.isLoading}>
          {createPost.isLoading ? 'Creating...' : 'Create Post'}
        </button>
      </div>

      {posts?.map((post: any) => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.content}</p>
          <button onClick={() => handleEdit(post.id, { title: 'Updated Title', content: 'Updated Content' })}>
            Edit
          </button>
          <button onClick={() => handleDelete(post.id)}>
            Delete
          </button>
        </div>
      ))}
    </div>
  );
};

export default PostCard;

결론

Axios와 React Query를 사용하면 React 애플리케이션에서 CRUD 작업을 간소화할 수 있습니다. 이러한 조합을 통해 깔끔하고 유지 관리 가능한 코드가 생성되어 확장성과 성능이 향상됩니다. 앱이 성장함에 따라 이러한 도구를 사용하여 상태 관리 및 데이터 가져오기를 단순화하세요.

React, TypeScript 및 최신 웹 개발 방식에 대한 더 많은 통찰력을 얻으려면 Dev.to에서 저를 팔로우하세요! ?‍?

위 내용은 Axios 및 React 쿼리를 사용한 React CRUD 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!