이전 기사인 사용자 정의 후크를 사용하여 React에서 HTTP 요청 단순화?에서 사용자 정의 후크를 사용하여 HTTP 요청을 단순화하는 방법을 살펴보았습니다. 소규모 애플리케이션에는 효과적이지만 React 앱이 확장됨에 따라 이 접근 방식을 유지하기가 더 어려워질 수 있습니다. 이 글에서는 Axios와 React Query를 사용하여 확장 가능한 방식으로 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 처리하는 방법을 살펴보겠습니다.
Axios: 브라우저 및 Node.js용 Promise 기반 HTTP 클라이언트인 Axios는 깔끔하고 읽기 쉬운 코드를 사용하여 비동기 HTTP 요청을 REST 엔드포인트로 보내는 작업을 단순화합니다.
React 쿼리: React에서 데이터 동기화, 캐싱 및 상태 관리를 향상시키는 강력한 데이터 가져오기 라이브러리입니다. React Query는 데이터 가져오기를 자동화하는 동시에 로딩 및 오류 상태를 더 효율적으로 제어합니다.
먼저 필요한 패키지를 설치하세요.
npm install axios react-query react-router-dom
다음으로 항목 파일(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 인스턴스를 생성하고 인터셉터를 사용하여 인증된 요청에 대한 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 };
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}`);
이제 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 }); };
마지막으로 사용자 정의 후크를 사용하고 사용자가 게시물을 생성, 편집, 삭제할 수 있는 간단한 구성 요소를 구축할 수 있습니다.
// 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!