AJAX(axios 이용하기)

설치

npm install axios

 

AJAX

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고 받을 수 있게 도와주는 간단한 브라우저 기능

 

GET 요청

import axios from 'axios'

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

axios.get(URL)을 하면 URL로 GET 요청이 된다. 가져온 데이터는 결과.data 안에 들어 있다.

실패한 경우 코드는 .catch()에 작성해 준다.

 

POST 요청

axios.post('URL', {name : 'kim'})

위 코드를 실행하면 POST 요청이 되어 서버로 { name : 'kim' } 이 전송된다.

완료 후 특정 코드를 실행시키고 싶으면 .then()을 사용한다.

 

동시 요청

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

URL1, URL2로 동시에 GET 요청을 할 수 있다.

 

*fetch 이용

fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )

json으로 바꾸는 작업이 필요하다.