[React] axios 사용하여 서버와 데이터 주고받기

 

서버에 보통 자료를 요청할 때는 GET, 자료를 생성하거나 업데이트할 때는 POST라고 작성하고 서버의 주소를 함께 적는 것으로 해당 위치에 자료를 가져오거나 업데이트를 진행할 수 있습니다.

이러한 경우 기본적으로는 페이지가 새로고침이 되는데, AJAX는 페이지 전체를 리프레쉬하지 않고, 일부분만을 업데이트할 수 있게 도와줍니다.

 

AJAX를 사용하는 방법은 여러가지가 있는데, 이 글에서는 axios라는 라이브러리를 사용하는 방법에 대하여 설명합니다.

 

 

 

#1 설치

 

npm 사용하기:

$ npm install axios

 

yarn 사용하기:

$ yarn add axios

 

 

 

#2 사용하기

get 요청은...

  axios.get('URL주소')형식으로 작성하고, .then에는 데이터 요청 성공 시 수행할 코드, .catch에는 데이터 요청 실패 시 수행할 코드를 적어주면 됩니다.

import axios from 'axios'    // <-- axios를 import

function App() {
  return (
    <div className="App">
      <button onClick={()=>{   
        axios.get('URL주소')    // <-- 버튼을 클릭했을때 데이터를 가져오도록(get) 지정 
          .then((response)=>{    // <-- 파라미터를 추가하면 (보통 response or result) 실제로 가져온 데이터를 확인할 수 있음 
          console.log(response)  // <-- 뭔가 의도치 않은 부가정보를 포함한 다양한 정보가 함께 오는데 response.data 식으로 사용하면 원하는 데이터 확인 가능
          }
          .catch(()=>{
          console.log('통신 실패'})    // <-- .then은 데이터 요청 성공시, .catch는 데이터 요청 실패시 수행할 코드
        )
      }} 버튼 </button>
    </div>
  );
}

데이터 요청 시 로딩UI를 띄우고 싶다면 get 시작 전 로딩 창을 띄우고 요청이 끝날 때 + 실패했을 때 로딩 UI를 삭제하도록 지정하면 됩니다.

 

post 요청은...

axios.post('URL주소', 전송할 데이터)

*전송할 데이터는 오브젝트{} 형태든 뭐든 상관없음.

 

 

동시에 여러 개의 요청을 하려면...

Promise.all([ axios.get('URL주소1'), axios.get('URL주소2') ])
  .then (()=>{ 
  // 모든 요청 성공시 수행할 코드
  })

 

---

*참고. 원래 서버는 문자만 주고받을 수 있습니다.

그래서 JSON이라는 형식으로 변환하여 주고받는데, axios 라이브러리를 사용하면 자동으로 변경해 줍니다.

 

 

 

Axios 더 알아보기 >