데이터 정리 및 검증을 위해 React 쿼리 및 데이터베이스 사용

데이터 정리 및 검증을 위해 React Query 및 데이터베이스 사용

현대 웹 애플리케이션 개발에서 프런트엔드 데이터 처리 및 관리는 매우 중요한 작업입니다. React Query는 데이터 관리에 도움을 줄 수 있는 강력한 라이브러리이고, 데이터베이스는 애플리케이션 데이터를 저장하는 중요한 도구입니다. 이 글에서는 데이터 정리 및 검증을 위해 React Query와 데이터베이스를 사용하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 배경
이제 사용자가 작업을 생성하고 이를 데이터베이스에 저장할 수 있는 간단한 작업 관리 애플리케이션이 있다고 가정합니다. 작업 생성 프로세스 중에 데이터의 유효성과 일관성을 보장하기 위해 사용자가 입력한 데이터를 정리하고 확인해야 합니다. 동시에 향후 쿼리 및 사용을 위해 작업 데이터를 데이터베이스에 저장해야 합니다.

2. 데이터 정리 및 검증

1. React Query 설치
   먼저 프로젝트에 React Query를 설치해야 합니다. npm 또는 Yarn 명령을 사용하여 설치할 수 있습니다.

npm:

npm install react-query

yarn:

yarn add react-query

2. Create React Query Provider
   애플리케이션의 항목 파일에서 React Query Provider를 생성하고 이를 App 컴포넌트의 외부 레이어에 래핑해야 합니다. 공급자는 나중에 사용할 수 있도록 React Query 관련 기능을 전체 애플리케이션에 주입합니다.

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用的其他组件 */}
    </QueryClientProvider>
  );
}

export default App;

3. 컴포넌트에서 React Query의 useMutation 후크 사용
   다음으로 데이터를 정리하고 확인해야 하는 컴포넌트에서 React Query의 useMutation 후크를 사용하여 데이터 제출 및 저장을 처리합니다. useMutation 후크는 요청 상태(로드, 성공, 오류 등)를 처리하는 데 도움이 되며 요청 전송 및 결과 처리 논리를 처리하는 기능을 제공할 수 있습니다.

import React from 'react';
import { useMutation } from 'react-query';

function CreateTaskForm() {
  const createTaskMutation = useMutation((newTask) => {
    // 执行任务创建的逻辑
    return fetch('/api/tasks', {
      method: 'POST',
      body: JSON.stringify(newTask),
    }).then((response) => response.json());
  });

  const handleSubmit = (event) => {
    event.preventDefault();

    const form = event.target;
    const formData = new FormData(form);

    const newTask = {
      title: formData.get('title'),
      description: formData.get('description'),
      // 其他字段
    };

    createTaskMutation.mutate(newTask);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" />
      <textarea name="description" />
      {/* 其他输入框 */}
      <button type="submit">创建任务</button>
    </form>
  );
}

위 예에서는 모의 API /api/tasks를 사용하여 작업 생성 요청을 시뮬레이션하고 요청이 성공한 후 작업 세부 정보를 반환했습니다. /api/tasks 来模拟任务的创建请求，并在请求成功后返回任务的详细信息。

4. 数据库连接与操作
   数据的清洗和校验完成后，我们需要将任务数据保存到数据库中。这里我们以 MongoDB 数据库为例，并使用 Mongoose 库连接和操作数据库。

首先，我们需要安装 Mongoose：

npm：

npm install mongoose

yarn：

yarn add mongoose

然后，在项目中创建 db.js

데이터베이스 연결 및 운영

데이터 정리 및 검증이 완료되면 작업 데이터를 데이터베이스에 저장해야 합니다. 여기서는 MongoDB 데이터베이스를 예로 들어 Mongoose 라이브러리를 사용하여 데이터베이스를 연결하고 운영합니다.

5. 먼저 Mongoose를 설치해야 합니다.
   
npm:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/my-database', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const TaskSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
  // 其他字段
});

const TaskModel = mongoose.model('Task', TaskSchema);

module.exports = TaskModel;

yarn:

import React from 'react';
import { useMutation } from 'react-query';
import TaskModel from './db';

function CreateTaskForm() {
  const createTaskMutation = useMutation((newTask) => {
    // 执行任务创建的逻辑
    return TaskModel.create(newTask); // 使用 Mongoose 保存任务数据
  });

  // 其他代码

  return (
    {/* 表单代码 */}
  );
}

그런 다음 프로젝트에 db.js 파일을 만들고 다음 코드를 추가합니다.
rrreee

위의 코드에서는 간단한 작업 모델을 정의하고 애플리케이션의 다른 곳에서 사용할 수 있도록 모델을 내보냅니다. 🎜🎜🎜작업 데이터를 데이터베이스에 저장🎜다음으로 React Query의 useMutation 후크의 비동기 콜백 함수에서 Mongoose를 사용하여 작업 데이터를 데이터베이스에 저장할 수 있습니다. 🎜🎜rrreee🎜위의 예에서는 TaskModel.create 메서드를 사용하여 작업 데이터를 데이터베이스에 저장합니다. 🎜🎜3. 요약🎜React Query와 데이터베이스를 사용하면 프런트엔드 데이터를 쉽게 정리하고 검증하여 데이터베이스에 저장할 수 있습니다. 이를 통해 데이터의 유효성과 일관성이 보장되고 애플리케이션의 사용자 경험과 데이터 품질이 향상됩니다. 위의 샘플 코드는 단순한 예일 뿐이며 실제 프로젝트에서는 특정 비즈니스 요구 사항을 충족하기 위해 필요에 따라 확장하고 최적화할 수 있습니다. 🎜

위 내용은 데이터 정리 및 검증을 위해 React 쿼리 및 데이터베이스 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!