FormData, React Query 및 Axios 인스턴스를 사용하여 데이터 보내기

최신 웹 개발에서는 데이터 제출을 효율적으로 처리하는 것이 중요합니다. 이 글은 React 애플리케이션에서 FormData, React Query, Axios 인스턴스를 사용하여 데이터를 전송하는 과정을 안내합니다.

소개
웹 애플리케이션을 구축할 때 데이터를 서버로 보내야 하는 경우가 많습니다. 이는 다양한 방법을 사용하여 수행할 수 있지만 FormData, React Query 및 Axios 인스턴스를 함께 사용하면 강력하고 유연한 접근 방식을 제공합니다. FormData를 사용하면 Axios를 사용하여 쉽게 전송할 수 있는 양식 필드와 해당 값을 나타내는 키/값 쌍 세트를 구성할 수 있습니다. React Query는 데이터 가져오기 및 상태 관리를 단순화하여 서버 측 데이터를 더 쉽게 처리할 수 있도록 해줍니다.

프로젝트 설정
먼저 새로운 React 프로젝트를 설정하고 필요한 종속성을 설치해 보겠습니다.

배쉬
npx 생성-반응-앱 양식데이터-반응-쿼리-축
CD 형식데이터-반응-쿼리-축
npm 설치 axios 반응 쿼리
Axios 인스턴스 생성
Axios 인스턴스를 생성하면 기본 URL 및 헤더와 같은 모든 HTTP 요청에 대한 기본 설정을 구성할 수 있습니다.

자바스크립트
// src/api/axiosInstance.js
'axios'에서 axios 가져오기;

const axiosInstance = axios.create({
기본 URL: 'https://api.example.com',
헤더: {
'콘텐츠 유형': '다중 부분/양식 데이터',
},
});

기본 axiosInstance 내보내기;
React 쿼리 설정
React Query는 데이터 가져오기, 캐싱, 업데이트를 위한 후크를 제공합니다. React Query를 사용하려면 애플리케이션을 QueryClientProvider로 래핑하세요.

자바스크립트
//src/index.js
'react'에서 React를 가져옵니다.
'react-dom'에서 ReactDOM을 가져옵니다.
import { QueryClient, QueryClientProvider } from 'react-query';
'./App'에서 앱 가져오기;

const queryClient = new QueryClient();

ReactDOM.render(


,
document.getElementById('루트')
);
양식 구성 요소 생성
다음으로, FormData를 사용하여 데이터를 보내는 양식 구성 요소를 만듭니다.

자바스크립트
// src/컴포넌트/MyForm.js
import React, 'react'에서 { useState };
'react-query'에서 { useMutation } 가져오기;
'../api/axiosInstance'에서 axiosInstance 가져오기;

const MyForm = () => {
const [file, setFile] = useState(null);

const mutation = useMutation((formData) => {
return axiosInstance.post('/upload', formData);
});

const handlerSubmit = (이벤트) => {
event.preventDefault();
const formData = 새로운 FormData();
formData.append('파일', 파일);

mutation.mutate(formData);

};

반품(

유형="파일"
onChange={(e) => setFile(e.target.files[0])}
/>
업로드

);
};

기본 MyForm 내보내기
양식 제출 처리
양식 구성 요소에서 FormData 객체를 생성하고 여기에 파일을 추가하여 양식 제출을 처리합니다. Axios 인스턴스를 사용하여 데이터를 전송하려면 React Query의 useMutation 후크를 사용하세요.

자바스크립트
const handlerSubmit = (이벤트) => {
event.preventDefault();
const formData = 새로운 FormData();
formData.append('파일', 파일);

mutation.mutate(formData);
};
결론
FormData, React Query 및 Axios 인스턴스를 결합하면 React 애플리케이션에서 데이터 제출을 효율적으로 처리할 수 있습니다. 이 접근 방식은 유연성을 제공하고 서버로 데이터를 전송하는 프로세스를 단순화합니다.

위 내용은 FormData, React Query 및 Axios 인스턴스를 사용하여 데이터 보내기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!