React의 POST HTTP 요청

플라톤에 의해 재발행

팔로워 : 0

개요

API로 작업할 때 우리는 종종 처리를 위해 데이터를 서버로 보내고 싶어합니다. 예를 들어 할 일 목록이 있고 양식 제출을 통해 추가하려는 경우 POST HTTP 요청을 사용하여 처리 및 잠재적 지속성을 위한 페이로드와 함께 요청을 보냅니다.

이 기사에서는 Fetch API와 Axios라는 두 가지 일반적인 접근 방식을 사용하여 React에서 POST HTTP 요청을 수행하는 방법을 배웁니다. 또한 기능 및 클래스 기반 구성 요소에서 이를 수행하는 방법을 알게 될 것입니다.

Fetch API를 사용하여 React로 POST HTTP 요청을 보내는 것은 다음과 같이 쉽습니다.


fetch('/myserver.endpoint', {
  method: 'POST',
  body: JSON.stringify({
    
  })
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
   .then((response) => response.json())
   .then((data) => {
      console.log(data);
      
   })
   .catch((err) => {
      console.log(err.message);
   });

Axios는 HTTP POST 요청을 보내는 우아한 대안을 제공합니다.


axios.post('/myserver.endpoint', {
    
  })
  .then((response) => {
    console.log(response.data);
      
  })
  .catch((error) => {
    console.log(error);
  })

이러한 접근 방식과 작동 방식에 대해 자세히 알아보려면 가이드의 나머지 부분을 읽어보세요!

POST HTTP 요청이란 무엇입니까?

이름에서 알 수 있듯이 POST 요청은 엔드포인트에 데이터를 게시하는 데 사용되며 일반적으로 엔드포인트는 이를 처리하고 데이터베이스에 저장합니다. 이 데이터는 양식에서 가져오거나 개체에 저장하거나 다른 방법으로 얻을 수 있지만 일반적으로 REST API가 사용할 JSON 표현으로 변환됩니다.

동사로 HTTP 요청을 보내는 것은 다음을 통해 간단합니다. API 가져 오기 (내장) 및 다음과 같은 라이브러리 Axios. Fetch API는 HTTP 요청을 수행하기 위한 내장 브라우저 메서드인 반면 Axios는 사용하기 전에 프로젝트에 설치해야 하는 외부 패키지입니다.

이 중에서 선택하는 것은 귀하에게 달려 있습니다. Fetch API는 더 장황하고 비동기식 요청에서 작동하지 않지만 Axios는 외부 종속성입니다. 그럼에도 불구하고 많은 사람들이 Fetch API보다 Axios로 작업하는 것을 선호합니다. 우리는 둘 다 다룰 것입니다.

두 방법 모두 장단점이 있지만 표준 HTTP 동사를 처리할 수 있다는 점에 유의하는 것이 중요합니다. POST, GET, PUT, PATCH, DELETE.

참고 : 앞에서 언급했듯이 우리는 수행하는 방법을 배울 것입니다 POST Fetch API 및 Axios 메서드를 사용하여 기능 구성 요소와 함께 요청한 다음 클래스 기반 구성 요소에서 JSON 자리 표시자 무료 가짜 게시물 REST API.

우리의 예에서는 우리가 이미 모의 API에서 가져온 게시물 목록을 작업할 것입니다. 새 게시물의 제목과 본문을 사용하는 양식을 만들고 제출되면 처리를 위해 POST 요청을 모의 서버로 보냅니다.

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
         .then((res) => res.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

   return (
      <>
         <div className="add-post-container">
            <form>
               <input type="text" className="form-control" />
               <textarea className="form-control" cols="10" rows="8"></textarea>
               <button type="submit">Add Post</button>
            </form>
         </div>
         <div className="posts-container">
            {posts.map((post) => {
               return (
                  <div className="post-card" key={post.id}>
                     <h2 className="post-title">{post.title}</h2>
                     <p className="post-body">{post.body}</p>
                     <div className="button">
                        <div className="delete-btn">Delete</div>
                     </div>
                  </div>
               );
            })}
         </div>
      </>
   );
};

export default App;

이제 양식이 제출되면 웹사이트의 게시물 목록에 데이터를 추가할 수 있도록 양식을 기능적으로 만들어 보겠습니다.

React의 기능 구성 요소에서 POST HTTP 요청을 수행하는 방법

React에 후크가 도입되어 이제 기능 구성 요소에서 HTTP 요청을 수행할 수 있습니다. 이전에는 기능 구성 요소가 UI 렌더링에만 사용되었습니다.

기능 구성 요소는 JavaScript 함수(표준 또는 ES6)가 React 요소(JSX)를 반환할 때 생성됩니다.

클래스 기반 구성 요소와 같이 생성자 메서드에서 상태 개체를 사용하는 대신 이제 다음과 같은 React 후크를 사용합니다. useState() 데이터를 원본 데이터에 전달하기 전에 저장합니다.

Fetch API를 사용하여 React의 기능 구성 요소에서 POST HTTP 요청을 수행하는 방법

Fetch API는 Promise우리는 .then() 및 .catch() 성공과 실패를 다루는 방법. 또한 데이터를 POST하려는 리소스/API의 URL인 필수 인수와 HTTP 요청을 나타내는 인수(우리의 경우)도 허용합니다. POST:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   
   
   
   
   const handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((res) => res.json())
         .then((post) => {
            setPosts((posts) => [post, ...posts]);
            setTitle('');
            setBody('');
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   return (
      
   );
};

export default App;

위의 코드에서는 양식의 제출 버튼을 클릭할 때 트리거되도록 양식에 연결할 메서드를 만들었습니다. 우리는 사용하여 시작했습니다 e.preventDefault() 양식을 제출할 때 페이지가 다시 로드되는 것을 방지하기 위해 보통 당신은 무슨 일이 일어나기를 원하지만 우리의 데모에서는 잘 작동하지 않습니다:

const handleSubmit = (e) => {
   e.preventDefault();
};

상기 찾고 fetch() 호출할 때 URL을 첫 번째 필수 매개변수로 추가했고 두 번째 매개변수는 요청 메서드(POST)를 가져옵니다. body및 header:

body – API 엔드포인트로 보내려는 데이터가 포함되어 있어야 합니다. 끈으로 묶다, 텍스트 기반 JSON 표현으로 변환합니다.
header – 콘텐츠 유형을 지정합니다. 이 경우 application/json, 페이로드가 JSON 문자열로 표시되기 때문에:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

마지막으로 이 메서드는 Promise, 우리는 그것에서 JSON 내용을 추출할 것입니다(서버의 응답), 업데이트 posts 새 데이터를 포함하는 상태입니다.

오류를 처리하기 위해 우리는 또한 .catch() 방법:

모범 사례, 업계에서 인정하는 표준 및 포함된 치트 시트가 포함된 Git 학습에 대한 실습 가이드를 확인하십시오. 인터넷 검색 Git 명령을 중지하고 실제로 배움 이것!

const handleSubmit = (e) => {
   e.preventDefault();
   fetch({...})
      .then((res) => res.json())
      .then((post) => {
         setPosts((posts) => [post, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

경고: 일반적으로 프런트 엔드에서 데이터를 저장 및 처리하지 않습니다. 하지만 우리가 작업하고 있는 모의 API는 실제로 새 게시물을 저장하고 반환하지 않기 때문에 첫 번째 GET 요청에서 반환하는 목록에 인위적으로 추가하고 있습니다. 게시물이 데이터베이스에 저장되면 사용자에게 표시할 응답을 제공하기 위해 백엔드에 또 다른 요청을 할 수 있습니다. 이것이 양식 제출의 기본 동작이 페이지를 다시 로드하는 것인 이유이기도 합니다. fetch() GET 요청하고 새 게시물을 이전 게시물과 함께 자동으로 표시합니다.

Axios를 사용하여 React의 기능 구성요소에서 POST HTTP 요청을 수행하는 방법

이전 섹션에서 Fetch API를 사용하여 POST 요청을 수행하는 방법을 설명했습니다. 이제 수정해보자 handleSubmit() 대신 Axios를 사용하여 POST 요청을 수행합니다.

Axios는 쉽게 보낼 수 있도록 promise를 사용하는 HTTP 클라이언트 라이브러리입니다. 비동기 HTTP 요청 REST 끝점에. 외부 라이브러리이기 때문에 먼저 프로젝트 디렉토리에서 다음 명령을 실행하여 프로젝트에 설치해야 합니다.

$ npm install axios

Axios를 성공적으로 설치했으면 POST 요청을 수행할 수 있습니다.

const handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: title,
         body: body,
      })
      .then((res) => {
         setPosts((posts) => [res.data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

위의 코드를 보면 Fetch API보다 훨씬 쉽고 구문이 덜 필요합니다. 더 이상 JSON으로 변환하고 헤더로 작업하고 데이터를 문자열화할 필요가 없기 때문입니다. 이 상용구는 Axios에 의해 추상화되었습니다.

React의 클래스 구성 요소에서 POST HTTP 요청을 수행하는 방법

클래스 구성 요소의 POST 요청은 더 이상 React 후크를 사용하지 않고 대신 사용하기 때문에 기능 구성 요소와 다르게 처리됩니다. state 목적.

클래스 구성 요소는 JSX를 반환하고 React 확장이 필요한 ES6 클래스입니다.

Fetch API를 사용하여 React의 클래스 구성 요소에서 POST HTTP 요청을 수행하는 방법

요청은 기능 구성 요소의 요청과 매우 유사합니다. 몇 가지 차이점을 발견할 수 있는 유일한 영역은 데이터를 다음 위치에 저장할 때입니다. state 그리고 사용할 때 state 더 이상 사용하지 않기 때문에 useState() 훅:

import React, { Component } from 'react';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }
   
   

   handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: this.state.title,
            body: this.state.body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((response) => response.json())
         .then((data) => {
            this.setState({ posts: [data, ...this.state.posts] });
            this.setState({ title: '' });
            this.setState({ body: '' });
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   render() {
      const { posts, title, body } = this.state;
      return (
         
      );
   }
}

export default App;

이번에는 더 이상 메서드를 선언하지 않습니다. const 예어. 대신 접두사 this. 이 메서드는 양식의 제출 버튼을 클릭할 때 트리거됩니다. 형식이므로 다음을 사용하여 시작했습니다. e.preventDefault() 양식이 제출될 때 페이지가 다시 로드되지 않도록 하려면:

handleSubmit = (e) => {
   e.preventDefault();
};

앞에서 배운 것처럼 Fetch API는 두 개의 매개변수를 사용합니다. 하나는 URL이고 두 번째는 요청 방법(POST), body, 우리가 게시하는 정보(문자열화해야 함), 그리고 headers:

handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: this.state.title,
         body: this.state.body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

이것이 약속임을 알면 이제 첨부할 수 있습니다. .then() 성공을 다루는 방법과 .catch() HTTP 요청에 오류나 실패가 있는 경우 상황을 처리하는 메서드입니다.

Axios를 사용하여 React의 클래스 구성 요소에서 POST HTTP 요청을 수행하는 방법

우리는 수행하는 방법을 보았습니다. POST 클래스 기반 구성 요소의 HTTP 요청. 이것은 Axios를 설치하고 교체하기만 하면 되기 때문에 Axios와 매우 유사합니다. handleSubmit() 메서드를 사용하므로 이제 Fetch API 대신 Axios를 사용합니다.

handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: this.state.title,
         body: this.state.body,
         userId: 1,
      })
      .then((response) => {
         this.setState({ posts: [response.data, ...this.state.posts] });
         this.setState({ title: '' });
         this.setState({ body: '' });
      })
      .catch((error) => console.log(error));
};

결론

이 가이드에서는 React의 두 가지 기본 방법을 사용하여 POST HTTP 요청을 수행하는 방법을 배웠습니다. 또한 기능적 구성 요소와 클래스 기반 구성 요소 모두에서 이러한 작업을 수행할 수 있는 방법을 보았으므로 이 기사는 우리 프로젝트에서 사용되는 것과 상관없이 우리에게 도움이 될 수 있습니다.

타임 스탬프 : 2022 년 7 월 11 일2022 년 7 월 19 일