일반적으로 get,post 방식은 브라우저를 새로고침하게 된다.
새로고침이 없이 서버에서 데이터를 가져와서 사용하려면 ajax를 사용하면 된다.

ajax로 get/post 요청을 처리하려면 3가지 방법이 있다.

1. XMLHttpRequest라는 옛날 문법 쓰기
2. fetch() 라는 최신 문법 쓰기
3. axios 같은 외부 라이브러리 쓰기

여기서 3번을 사용해보자

설치하기

우선 터미널을 열어서 설치를 해주자

npm install axios

그리고 상단에 import axios from 'axios' 하면 끝

사용법

GET 방식

내가 만약에 어느 url로 get 요청을 하려면 이렇게 작성하면 된다.

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('url주소').then((받아온데이터)=>{
        console.log(받아온데이터.data)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>버튼</button>
  )
}

1. axios.get()으로 get 요청을 하고
2. get 요청으로 받아온 데이터를 then(받아온데이터) 이렇게 파라미터로 받은 다음
   then((받아온데이터)=>{실행할 코드}) 이렇게 작성하면 된다.
3. 만약 ajax통신이 실패했을 경우 catch(() =>{실행할코드}) 이렇게 작성해주면 된다.

POST 방식

간단하다

axios.post('url' , {name: "lee"})

이렇게 작성하면 post방식으로 서버로 해당 데이터를 보내준다.
완료시 특정 코드를 실행하고 싶다면 앞에와 마찬가지로 .then()을 사용하자

동시에 여러개 ajax 요청은요?

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

이렇게 해주면된다.
둘다 완료시 특정 코드를 실행하고 싶으면 똑같이 then을 사용하자

한가지 참고로 말하자면 서버와는 원래 문자 자료만 주고받는다. 근데 어떻게 문자자료만 받아오..
그래서 json이란 것으로 서버와 자유롭게 어떤 데이터 형식이든 받아올 수 있다.
실제로 json은 문자 취급을 받는다.