React 쿼리의 useMutation 후크는 React 애플리케이션에서 서버 측 데이터 업데이트를 관리하기 위한 강력한 도구입니다. 구조화되고 돌연변이를 처리하는 효율적인 방법으로 기존 접근 방식에 비해 몇 가지 장점을 제공합니다.
이 튜토리얼에서는 React JS 앱에서 React 쿼리의 useMutation 후크를 사용하여 서버에 데이터를 생성하거나 추가하는 방법을 알아봅니다. React Query와 함께 React의 Mutation을 사용하여 서버에 데이터를 게시하려면 다음 단계를 따르세요.
Create React App 도구는 시스템에 Node 및 NPM과 함께 있어야 하는 React 앱을 만드는 데 필수적인 도구입니다. 주어진 명령을 실행한 후에는 프로젝트의 루트로 이동해야 합니다.
npx create-react-app react-blog-app
cd react-blog-app
Axios는 서버에 요청하는 데 도움이 되는 반면, 요청 쿼리는 서버 응답 처리에 대한 무조건적인 지원을 제공합니다. 다음은 주어진 명령을 사용하여 두 패키지를 React 앱에 추가하는 방법입니다.
npm install @tanstack/react-query axios --legacy-peer-deps
부트스트랩 프레임워크는 애플리케이션에서 빠른 속도로 UI를 생성하도록 지원합니다. UI 구성요소를 생성하기 위해 추가적인 노력을 기울일 필요가 없습니다.
npm i bootstrap --legacy-peer-deps
두 번째 단계에서는 src/App.js 파일에서 부트스트랩 CSS를 가져와야 합니다.
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
function App() {
return <div></div>;
}
export default App;
반응 쿼리 패키지에서 QueryClientProvider 및 QueryClient를 가져옵니다. QueryClientProvider 모듈로 앱 구성 요소를 래핑합니다. App.js 코드를 주어진 코드로 바꾸세요.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// Create a client
const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
);
이제 반응 쿼리 모듈을 통해 모든 후크와 변형 후크를 사용할 준비가 되었습니다.
comminors/ 디렉토리와 Users.js 디렉토리를 생성해야 합니다. 함수 구성요소 파일.
import React from 'react'
function Users() {
return (
<div>Users page</div>
)
}
export default Users
JSON 서버를 생성하려면 json-server 모듈을 설치해야 합니다. 다음은 모듈을 전역적으로 추가하기 위해 호출해야 하는 명령입니다.
sudo npm install -g json-server --legacy-peer-deps
다음으로 React 프로젝트의 루트에서 db.json 파일을 생성해야 합니다. 다음 코드를 파일입니다.
{
"posts": [
]
}
주어진 명령을 사용하여 다른 터미널 화면에서 백엔드 서버를 실행합니다. 콘솔 화면에 API 링크를 제공합니다.
json-server --watch db.json --port 3004
여기에 서버에 데이터를 추가하기 위해 변형을 수행하는 코드를 사용하는 파일이 있습니다. 코드를 comminents/Users.js 파일에 배치했는지 확인하세요.
import React from "react";
import axios from "axios";
import { useMutation } from "@tanstack/react-query";
function Users() {
const mutation = useMutation((DATA) => {
return axios.post("http://localhost:3004/posts", DATA);
});
return (
<div>
{mutation.isLoading ? (
"Adding post..."
) : (
<>
{mutation.isError ? (
<div>Error : {mutation.error.message}</div>
) : null}
{mutation.isSuccess ? <div>Post added! </div> : null}
<button
onClick={() => {
mutation.mutate({
title:
"sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
});
}}
>
Create Post
</button>
</>
)}
</div>
);
}
export default Users;
우리는 유일한 구성 요소를 만들었으므로 App.js 파일로 가져와야 합니다. App.js 파일 코드를 다음 코드로 바꾸세요.
import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Users from "./components/Users";
function App() {
return (
<div className="container mt-5">
<h2>React Query Fetch Data useMutation Example</h2>
<Users />
</div>
);
}
export default App;
당신은 당신에게 닥친 모든 장애물을 거의 넘었습니다. 마지막 작업은 앱 서버를 실행하고 브라우저에서 앱을 실행하는 것입니다.
npm start
http://localhost:3000
이 React 쿼리 사용 변형 예제에서는 React 쿼리 useMutation 후크를 사용하여 React 애플리케이션에서 서버에 데이터를 게시하거나 생성하는 방법을 배웠습니다.