React에서 서버 통신

서버에 GET,POST같은 요청을 날리기 위해서 AJAX기능을 사용한다.

방법으로는 3가지정도가 있다.
그 중에 외부 라이브러리를 사용하는 것이 가장 편하니 그것을 사용해 보도록한다.

npm install axios 설치 한다.

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

사실 AJAX기능은 JavaSCript나 TypeScript 공부할 때 사용해 봤기때문에 익숙하다.

axios.post('URL', {name : 'kim'})
POST요청을 하기 위해서는 위 처럼 사용하면 된다.

Promise.all( [axios.get('URL1'), axios.get('URL2')] )
동시에 요청을 하기 위해서는 Promise를 사용하면 된다.

서버와 통신 추가

원래는 object/array 이런거 못주고 받는다.
근데 할 수 있는 방법이 있다.

"{"name" : "kim"}" 이런 형식으로 ""을 사용해서 통신할 수 있다.

이런 것을 JSON이라고 한다.
JSON은 문자 취급을 받기 때문에 가능해지는 것이다.