[React_study] Ajax (서버와 통신)

* AJAX

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는

간단한 브라우저 기능을 AJAX라고 한다.

 

 

AJAX로 GET/POST요청하려면 방법

• XMLHttpRequest
• fetch()
• axios라이브러리 사용

* axios라이브러리 설치

npm install axios 

 

 

* AJAX요청하는 법

• (참고) react에선 거의 서버와 ajax를 이용해서 통신을 한다.

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('url정보 넣기').then((result)=>{
        console.log(result.data)
      })
      .catch(()=>{
        console.log('error')
      })
    }}>button</button>
  )
}

• axios를 상단에서 import
• axios.get(URL)을 통해서 URL로 GET요청
• 가져온 결과값은 result.data안에 담겨있다.
• 실패했을 때 실행할 코드는 .catch() 안에 작성