리액트 - 서버와 통신하기 AJAX

AJAX란?

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능을 AJAX라고 한다.
AJAX로 GET/POST요청을 하려면 3개의 방법이 있다.

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

이 중 3번이 가장 편하니 3번을 써보자

외부라이브러리 >> install

npm install axios

GET요청 하는 법

import axios from 'axios'

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

1. axios 사용을 위해 import하기
2. axios.get(URL) >> URL로 GET요청이 들어옴
3. 데이터를 가져온 결과는 결과.data 안에 들어있음
   그래서 위의 버튼을 누르면 서버에서 가져온 데이터가 콘솔창에 출력됨
4. 인터넷이 안되거나 URL이 틀려 요청을 실패하면 catch() 안의 콜백함수가 실행됨

POST요청 하는 법

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

이렇게 하면 서버로 {name:'kim'} 자료가 전송된다. 완료시 특정 코드를 실행하고 싶으면 역시 .then()을 뒤에 붙이면 된다.

동시에 요청 여러개

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

이러면 URL1, URL2로 GET요청을 동시에 해준다.
둘 다 완료시 특정코드를 실행하고 싶으면 Promise.all 뒤에 .then을 붙이면 된다.

원래 서버와 통신할 때에는 object/array 이런 자료들은 주고받지 못하고 문자자료만 주고받ㅇ들 수 있다. 그러나 JSON을 사용하면 가능하다.

"{"name" : "Kim" }" 이러한 형태를 JSN이라고 하는데 JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있다. 그래서 실제로 결과.data를 출력해보면 따옴표쳐진 JSON이 나와야하는데 axios 라이브러리는 JSON -> object/array 변환작업을 자동으로 해줘서 출력해보면 object/array가 나온다.

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

그래서 자바스크립트 문법인 fetch()를 이용하면 이렇게 JSON -> object/array로 바꾸는 작업을 해줘야한다.