React - axios 라이브러리로 ajax요청

서버 : 유저가 요청한 데이터를 보내주는 프로그램.

get : 서버에서 데이터를 가져올 때

post : 데이터를 서버로 보낼 때

 

브라우저 주소창에 GET, POST 날리면 브라우저가 새로고침되는 단점이 있다.

---

ajax란?

서버에 GET, POST 요청 시 새로고침 없이 데이터를 통신할 수 있게 도와주는 간단한 브라우저 기능.

• 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

 

사용법은 3가지가 있는데,

1. XMLHttpRequest 라는 옛날 문법사용

2. 자바스크립트 fetch()

3. axios 외부라이브러리

---

리액트에서 서버와 ajax 통신할 때 axios 라이브러리 설치&사용 법

// 터미널 오픈 후 install
npm install axios

// HTTP request가 필요한 컴포넌트에 임포트
import axios from 'axios';

이러면 준비 끝

 

// axios.get('/url').then().catch()

axios.get('https://codingapple1.github.io/shop/data.json')
.then((data)=>{
	// 가져온 data 처리 코드
}).catch(()=>{
	// data를 불러오지 못했을 때 오류 처리 코드
})

사용 문법이다. 보통 then이나 catch다음 콜백함수로 처리하는 코드 작성.

 

동시에 ajax 요청 여러개 날리려면 아래와 같이!

Promise.all([ axios.get('/url'), axios.get('/url') ])
.then()
.catch()

 

post는 axios.post('/url', { name : kim } ) 처럼 서버 url 입력하고 보낼 데이터 작성하면 됨.

---

axios를 왜 사용하냐!?

 

원래 서버와는 문자자료만 주고받을 수 있잖아요.

근데  "{"name" : "kim"}"  이렇게 JSON형식으로 변환해서

object나 array 주고 받으면 나중에 데이터 정리하기 편하다.

 

서버에서 데이터를 GET해올 때

fetch()를 사용하게되면 JSON을 변환해주는 과정이 추가로 필요함. ex) fetch('/url').then(data => data.json()) 

axios라이브러리는 자동으로 json형식을 array나 object로 변환해준다.