리액트에서 서버와 통신하려면 ajax 1

AJAX란?

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

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

1. XMLHttpRequest라는 옛날 문법 쓰기

2. fetch() 라는 최신 문법 쓰기

3. axios 같은 외부 라이브러리 쓰기

3번이 젤 편하니 3번 써보자고

터미널 열고 코드 치면 설치 끝

npm install axios 

---

AJAX 요청하는법

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>
  )
}

1. axios를 쓰려면 상단에서 import해오고

2. axios.get(URL) 이러면 그 URL로 GET요청됨

3. 데이터 가져온 결과는 결과.data 안에 들어있음 => 결과는 걍 내맘대로 변수 적은거

그래서 위의 버튼 누르면 서버에서 가져온 데이터가 콘솔창에 출력

4. 인터넷이 안되거나 URL이 이상하면 실패하는데

실패했을 때 실행할 코드는 .catch() 안에 적으면 됨