[React] axios = 라이브러리를 이용한 AJAX

AJAX란?

• "Asynchronous JavaScript and XML"의 약자로, 비동기적인 JS와 XML을 의미함
• 웹 페이지에서 데이터를 비동기적으로 서버로부터 가져오거나 서버로 데이터를 보내는 기술
• 새로고침 없이 동적으로 데이터를 업데이트하고 표시할 수 있음.
• XML 대신 JSON과 같은 다양한 형식의 데이터를 주고받을 수 있음.

---

라이브러리 설치

// 설치
npm install axios

// 라이브러리
import axios from 'axios'

---

GET 요청 방법

function App(){
  return (
    <button onClick={()=>{
      axios.get('/url~').then((rs)=>{
        console.log(rs.data)
      })
      .catch(()=>{
        console.rs('error')
      })
    }}>AJAX버튼</button>
  )
}

• url~ 로 GET요청.
• 가져온 데이터는 rs에 있음.

---

POST 요청 방법

axios.post('/url~', {name : 'kwak'}).then((rs)=>{
        // 요청 완료시 실행할 코드
      })

• /url~ 서버로 { name : 'kwak' } 전송 요청.

다중 요청

Promise.all( [axios.get('/url1'), axios.get('/url2'), axios.get('/url3')] ).then((rs)=>{
        // 요청 완료시 실행할 코드
      })

• /url1, /url2, /url3 서버로 GET요청.

---

자바스크립트 fetch( ) 문법으로하면 JSON에서 object/array를 바꿔주는 작업이 필요함 ~