axios 로 get 요청하기

서버에게 데이터 요청할때 유저가 그냥 데이터 달라고 하면 서버가 보내주지 않는다.
서버에 데이터를 요청할때는 정확한 규격에 맞춰서 요청해야 한다.

1. 어떤 데이터인지 (URL 형식으로)
2. 어떤 방법으로 요청할지 (GET or POST)

보통, 서버에서 데이터를 가져올때는 GET 서버로 데이터를 보낼때는 POST 를 쓴다.

🔍AJAX 란?

서버에 GET,POST 요청을 할때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능을 말한다. (get 요청을 날리고 싶으면 주소창에, post요청을 날리고 싶으면 form 태그를 이용하면 되지만, 브라우저가 새로고침된다는 단점이 존재)
그래서 AJAX를 자주 쓴다.

AJAX로 GET/POST요청하려면 방법 3개 중 택1 하면 되는데

1. XMLHttpRequest 라는 옛날 문법
2. Fetch 라는 최신문법
3. axios 라는 외부 라이브러리 → 우리가 사용할것

Fetch와 axios를 비교해보는 표는 아래에 참고.

axios는 별도 설치가 필요로한 단점이 있으나 fetch보다 많은 기능지원과 문법이 조금이나마 간소화된다는 장점이 있다! 따라서 간단히 사용할때는 fetch를 쓰고 확장성을 염두해볼때 axios를 쓰면 좋다.

AJAX 요청하는 법

버튼누르면 제가 만든 서버로 ajax 요청을 해보도록 하자.
https://codingapple1.github.io/shop/data2.json
이 URL로 GET요청을 하면 상품 3개를 가져온다.

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{
        console.log(결과.data)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>버튼</button>
  )
}

원래 서버와 데이터를 주고받을때는 문자 자료만 주고받을수있다.
array나 object는 안되는데 array나 object주고받을때는 따옴표를 치면 문자로 인식하기때문에 주고받기가 가능하다.
{"name" : "kim" } < 일명 JSON 어라고 한다.
즉, JSON으로 받아온것임.
그리고 이것을 자동으로 axios 가 array로 변환해준것.

fecth로 받을때는 JSON 그대로 받아오기때문에 이것을 다시 array/object로 변환하는 과정을 줘야한다.
axios는 굳이 그런 과정을 주지않아도 되기에 axios를 사용하는 편리함중 하나라고 볼수있다.