Morioh
Login
Duck Hwan

Duck Hwan

6 months ago

React에서 서버에 데이터를 게시하는 방법

React 쿼리의 useMutation 후크는 React 애플리케이션에서 서버 측 데이터 업데이트를 관리하기 위한 강력한 도구입니다. 구조화되고 돌연변이를 처리하는 효율적인 방법으로 기존 접근 방식에 비해 몇 가지 장점을 제공합니다.

이 튜토리얼에서는 React JS 앱에서 React 쿼리의 useMutation 후크를 사용하여 서버에 데이터를 생성하거나 추가하는 방법을 알아봅니다. React Query와 함께 React의 Mutation을 사용하여 서버에 데이터를 게시하려면 다음 단계를 따르세요.

목차

  • 1단계: React 프로젝트 구축
  • 2단계: Axios & 쿼리 반응
  • 3단계: 부트스트랩 모듈 구성
  • 4단계: React-Query 설정
  • 5단계: 함수 구성요소 구축
  • 6단계: JSON 서버 생성
  • 7단계: useMutation을 사용하여 서버에 데이터 게시
  • 8단계: App JS 구성 요소 업데이트
  • 9단계: 브라우저에서 앱 테스트

시사

How to Use React Query Mutation to Create or Add Data to Server

1단계: React 프로젝트 구축

Create React App 도구는 시스템에 Node 및 NPM과 함께 있어야 하는 React 앱을 만드는 데 필수적인 도구입니다. 주어진 명령을 실행한 후에는 프로젝트의 루트로 이동해야 합니다.

npx create-react-app react-blog-app
cd react-blog-app

2단계: Axios & 쿼리 반응

Axios는 서버에 요청하는 데 도움이 되는 반면, 요청 쿼리는 서버 응답 처리에 대한 무조건적인 지원을 제공합니다. 다음은 주어진 명령을 사용하여 두 패키지를 React 앱에 추가하는 방법입니다.

npm install @tanstack/react-query axios --legacy-peer-deps

3단계: 부트스트랩 모듈 구성

부트스트랩 프레임워크는 애플리케이션에서 빠른 속도로 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;

4단계: React-Query 설정

반응 쿼리 패키지에서 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>
);

이제 반응 쿼리 모듈을 통해 모든 후크와 변형 후크를 사용할 준비가 되었습니다.

5단계: 함수 구성요소 구축

comminors/ 디렉토리와 Users.js 디렉토리를 생성해야 합니다. 함수 구성요소 파일.

import React from 'react'
function Users() {
  return (
    <div>Users page</div>
  )
}
export default Users

6단계: JSON 서버 생성

JSON 서버를 생성하려면 json-server 모듈을 설치해야 합니다. 다음은 모듈을 전역적으로 추가하기 위해 호출해야 하는 명령입니다.

sudo npm install -g json-server --legacy-peer-deps

다음으로 React 프로젝트의 루트에서 db.json 파일을 생성해야 합니다. 다음 코드를 파일입니다.

{
  "posts": [
  ]
}

주어진 명령을 사용하여 다른 터미널 화면에서 백엔드 서버를 실행합니다. 콘솔 화면에 API 링크를 제공합니다.

json-server --watch db.json --port 3004

7단계: useMutation을 사용하여 서버에 데이터 게시

여기에 서버에 데이터를 추가하기 위해 변형을 수행하는 코드를 사용하는 파일이 있습니다. 코드를 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;

8단계: App JS 구성 요소 업데이트

우리는 유일한 구성 요소를 만들었으므로 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;

9단계: 브라우저에서 앱 테스트

당신은 당신에게 닥친 모든 장애물을 거의 넘었습니다. 마지막 작업은 앱 서버를 실행하고 브라우저에서 앱을 실행하는 것입니다.

npm start
http://localhost:3000

결론

이 React 쿼리 사용 변형 예제에서는 React 쿼리 useMutation 후크를 사용하여 React 애플리케이션에서 서버에 데이터를 게시하거나 생성하는 방법을 배웠습니다.

3.60 GEEK