React에서 백엔드 통신은 일반적으로 HTTP 프로토콜을 사용하여 이루어집니다. 많은 개발자가 XML HTTP 요청 인터페이스와 HTTP 요청을 위한 Fetch API에 익숙하지만 프로세스를 더욱 단순화하는 Axios라는 또 다른 강력한 라이브러리가 있습니다.
내용의 테이블
- 전제조건
- 액시오스 소개
- React 애플리케이션을 만드는 단계
- React에서 Axios의 필요성
- Axios로 요청 받기
- Axios를 사용한 POST 요청:
- Axios를 사용한 삭제 요청:
- Axios의 응답 객체
- 오류 개체:
- Axios 라이브러리의 특징
- Axios의 단축 메소드
- 결론
Axios 소개:
널리 사용되는 라이브러리인 Axios는 주로 REST 엔드포인트에 비동기 HTTP 요청을 보내는 데 사용됩니다. 이 라이브러리는 CRUD 작업을 수행하는 데 매우 유용합니다.
- 이 인기 있는 라이브러리는 백엔드와 통신하는 데 사용됩니다. Axios는 JS ES6에 기본으로 제공되는 Promise API를 지원합니다.
- Axios를 사용하여 애플리케이션에서 API 요청을 수행합니다. 요청이 이루어지면 반환으로 데이터를 얻은 다음 프로젝트에서 이 데이터를 사용합니다.
- 이 라이브러리는 개발자들 사이에서 매우 인기가 있습니다. GitHub에서 확인하면 78,000개의 별을 찾을 수 있습니다.
Axios를 설치하기 전에 React 프로젝트 앱이 이 라이브러리를 설치할 준비가 되어 있어야 합니다. 만들기 반응하다 아래 단계에 따라 신청하세요…
React 애플리케이션을 만드는 단계:
1 단계: 다음은 프로젝트에서 React 앱을 생성하는 명령입니다.
npx create-react-app myreactapp>
2 단계: 첫 번째 단계에서 생성한 디렉토리에 들어가세요.
cd myreactapp>
3단계: 아래 명령을 사용하여 Axios 라이브러리를 설치하십시오.
npm i axios>
프로젝트 구조:
사전 초기화 프로그램 C#
업데이트된 종속성 패키지.json 파일.
'dependencies': { '@testing-library/jest-dom': '^5.17.0', '@testing-library/react': '^13.4.0', '@testing-library/user-event': '^13.5.0', 'axios': '^1.6.2', 'react': '^18.2.0', 'react-dom': '^18.2.0', 'react-scripts': '5.0.1', 'web-vitals': '^2.1.4' },> 예: 이 코드 조각은 axios를 사용하여 백엔드 서버에 HTTP 요청을 보냅니다.
자바스크립트
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> class App extends React.Component {> >state = {> >newfiles:>null>,> >};> >handleFile(e) {> >// Getting the files from the input> >let newfiles = e.target.newfiles;> >this>.setState({ newfiles });> >}> >handleUpload(e) {> >let newfiles =>this>.state.newfiles;> >let formData =>new> FormData();> >// Adding files to the formdata> >formData.append(>'image'>, newfiles);> >formData.append(>'name'>,>'Name'>);> >axios({> >// Endpoint to send files> >url:>' http://localhost:8080/files '>,> >method:>'POST'>,> >headers: {> >// Add any auth token here> >authorization:>'your token comes here'>,> >},> >// Attaching the form data> >data: formData,> >})> >// Handle the response from backend here> >.then((res) =>{})> >// Catch errors if any> >.>catch>((err) =>{});> >}> >render() {> >return> (> >> >> > type='file' // To select multiple files multiple='multiple' onChange={(e) =>this.handleFile(e)} /> onClick={(e) => this.handleUpload(e)}> 파일 보내기 ); } } 기본 앱 내보내기;> |
>
>
애플리케이션 실행 단계: 터미널을 열고 다음 명령을 입력하십시오.
npm start>
산출: 브라우저를 열면 프로젝트가 URL에 표시됩니다. http://localhost:3000/
위의 예는 프로젝트에서 Axios를 사용하는 방법을 보여주는 간단한 코드 설명입니다. 다음 섹션에서는 Axios의 GET, POST, PUT과 같은 여러 방법에 대해 설명하겠습니다.
React에서 Axios의 필요성:
앞서 논의했듯이 Axios를 사용하면 React 프로젝트의 API와 통신할 수 있습니다. AJAX를 사용하여 동일한 작업을 수행할 수도 있지만 Axios는 더 많은 기능과 기능을 제공하므로 애플리케이션을 빠르게 구축하는 데 도움이 됩니다.
Axios는 약속 기반 라이브러리이므로 약속 기반 비동기 HTTP 요청을 구현해야 합니다. jQuery와 AJAX도 동일한 작업을 수행하지만 React 프로젝트에서는 React가 자체 가상 DOM에서 모든 것을 처리하므로 jQuery를 전혀 사용할 필요가 없습니다.
다음은 Axios를 사용하여 고객의 데이터를 가져오는 예입니다.
자바스크립트
문자열 형식 자바
const getCustomersData = () =>{> >axios> >.get(>' https://jsonplaceholder.typicode.com/customers '>)> >.then(data =>console.log(data.data))> >.>catch>(error =>console.log(오류));> };> getCustomersData();> |
>
>
이제 다음 지점으로 가서 Axios(GET-POST-DELETE)를 사용하여 데이터 가져오기 또는 데이터 소비와 같은 다양한 작업을 수행하는 방법을 이해해 보겠습니다.
Axios를 사용한 GET 요청:
MyBlog 구성요소를 생성하고 이를 DidMount 라이프사이클 구성요소에 연결합니다. 상단의 Axios를 Import하고 Get 요청으로 데이터를 가져옵니다.
자바스크립트
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class MyList extends React.Component {> >state = {> >blogs: [],> >};> >componentDidMount() {> >axios> >.get(> >`https:>//jsonplaceholder.typicode.com/posts`> >)> >.then((response) =>{> >const posts = response.data;> >this>.setState({ posts });> >});> >}> >render() {> >return> (> >>> >{>this>.state.posts.map((post) =>{> >post.title;> >})}> >>>);> >}> }> |
>
>
여기서는 axios.get(URL)을 사용하여 응답 객체를 반환하는 Promise를 가져옵니다. 반환된 응답은 게시물의 개체에 할당됩니다. 상태 코드 등과 같은 다른 정보도 검색할 수 있습니다.
Axios를 사용한 POST 요청:
게시 요청을 위한 새 구성요소 AddPost를 만듭니다. 이 요청은 게시물 목록에 게시물을 추가합니다.
자바스크립트
주요 메소드 자바
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class AddPost extends React.Component {> >state = {> >postTitle:>''>,> >};> >handleChange = (event) =>{> >this>.setState({ postTitle: event.target.value });> >};> >handleSubmit = (event) =>{> >event.preventDefault();> >const post = {> >postName:>this>.state.postName,> >};> >axios> >.post(> >`https:>//jsonplaceholder.typicode.com/posts`,> >{ post }> >)> >.then((res) =>{> >console.log(res);> >console.log(res.data);> >});> >};> >render() {> >return> (> >> >'{this.handleSubmit}'>게시물 이름: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add ); } }> |
>
>
위 코드에서는 HTTP Post 요청을 수행하고 데이터베이스에 새 게시물을 추가했습니다. onChange 이벤트는 handlerChange() 메서드를 트리거하고 API 요청이 데이터를 성공적으로 반환하면 요청을 업데이트합니다.
Axios를 사용한 삭제 요청:
서버에 삭제 요청을 보내려면 axios.delete가 사용됩니다. 이 요청 URL과 선택적 구성을 만드는 동안 두 개의 매개변수를 지정해야 합니다.
axios.delete(url, { data: { foo: 'bar' }, headers: { 'Authorization': '******' } });> 삭제 요청을 보내는 동안 요청 본문과 헤더를 설정해야 합니다. 이 목적으로 config.data를 사용하십시오. 위의 POST 요청에서 아래와 같이 코드를 수정합니다.
자바스크립트
handleSubmit = event =>{> >event.preventDefault();> >axios.>delete>(> >`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)> >.then(res =>{> >console.log(res);> >console.log(res.data);> >})> }> |
>
numpy 린스페이스
>
Axios의 응답 객체:
서버에 요청을 보내면 서버로부터 아래와 같은 속성을 가진 응답 객체를 받습니다.
- 데이터: 페이로드 형식으로 서버로부터 데이터를 받습니다. 이 데이터는 JSON 형식으로 반환되며 다시 JavaScript 개체로 구문 분석되어 사용자에게 전달됩니다.
- 상태: 서버에서 반환된 HTTP 코드를 받습니다.
- 상태텍스트: 서버에서 반환한 HTTP 상태 메시지입니다.
- 헤더: 모든 헤더는 서버에서 다시 전송됩니다.
- 구성: 원래 요청 구성.
- 요구: 실제 XMLHttpRequest 객체.
오류 개체:
요청에 문제가 있으면 오류 개체가 표시됩니다. 주어진 속성을 가진 오류 객체로 Promise가 거부됩니다.
- 메시지: 오류 메시지 텍스트.
- 응답: 응답 객체(수신된 경우)
- 요구: 실제 XMLHttpRequest 객체(브라우저에서 실행될 때).
- 구성: 원래 요청 구성.
Axios 라이브러리의 특징
- JSON 데이터는 자동으로 변환됩니다.
- 요청 및 응답 데이터를 변환합니다.
- Node.js에서 HTTP 요청을 하는 데 유용합니다.
- 브라우저에서 XMLHttpRequest를 만듭니다.
- XSRF로부터 보호하기 위한 클라이언트 측 지원을 제공합니다.
- Promise API를 지원합니다.
- 요청을 취소하는 기능.
Axios의 단축 메소드:
다음은 Axios의 몇 가지 단축 방법입니다.
- axios.request(config)
- axios.head(url[, config])
- axios.get(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, 데이터[, 구성]])
- axios.delete(url[, config])
- axios.options(url[, config])
- axios.patch(url[, 데이터[, 구성]])
결론
이 기사에서는 Axios 라이브러리에 대한 모든 것을 설명했습니다. 우리는 Axios에서 데이터 가져오기, 데이터 게시, 데이터 업데이트 또는 데이터 삭제와 같은 몇 가지 유용한 작업을 논의했습니다. React 작업을 시작하면 이 라이브러리를 사용하여 데이터베이스 서버와 통신해야 합니다. 따라서 이를 연습하고 Axios에서 작동하는 방식을 이해하는 것이 중요합니다.