[React] React에서 서버와 통신하는 방법 ajax axios

AJAX( Asynchronous JavaScript and XML ) 란?

-> 비동기적으로 데이터를 서버로부터 가져오거나 서버로 데이터를 보낼 수 있는 기술이다. AJAX는 웹 페이지를 다시 로드(새로고침) 하지 않고도 동적으로 데이터를 업데이트할 수 있게 해준다.

 

AJAX로 GET/POST요청하려면 방법 3개 중 택1 하면 된다.

1. XMLHttpRequest라는 예전 문법 쓰기
2. fetch() 라는 최신 문법 쓰기
3. axios 같은 외부 라이브러리 쓰기 << 사용할 방법

---

사용법

npm install axios

-> 터미널 입력해서 설치한다.

 

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('URL 주소').then((결과)=>{
        console.log(결과.data)
      })
      .catch(()=>{
        console.log('실패')
      })
    }}>버튼</button>
  )
}

 

1. axios를 쓰려면 상단에서 import 한다.
2. axios.get(URL) 이러면 그 URL로 GET 요청이 된다. 데이터 가져온 결과는 결과.data 안에 들어있다. 
3. 그래서 위의 버튼 누르면 서버에서 가져온 데이터가 콘솔창에 출력된다. 
4. 인터넷이 안되거나 URL이 이상하면 실패하는데 실패했을 때 실행할 코드는 .catch() 안에 적으면 된다.