intro
React는 효율적인 UI구현을 위한 라이브러리입니다.
HTTP Client 를 내장하고 있는 Angular와는 다르게 리액트에는 따로 내장하고있는 내장클래스가 존재하지 않습니다.
따라서 리액트에서 AJAX(비동기 웹 에플리케이션)를 구현하기 위해 JavaScript 내장 객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야한다.
그렇다면 어떤 HTTP Client를 사용해야할까 ?
React와 함께 쓰면 좋은 HTTP Client라이브러리는 많으나 현재 리액트에서 가장많이 쓰이고있는 Fetch API를 비교하면서 Axios 라이브러리가 무엇인지 알아보도록 하겠다.
AJAX란?
ajax란 Javascript의 라이브러리 중 하나로
Asynchronous(비동기) JavaScript(자바스크립트) And Xml(비동기식 자바스크립트와 xml) 의 약자이다.
+ 비동기 방식이란 ?
비동기방식은 웹 페이지를 리로드 하지않아도 데이터를 불러와주는 방식으로 Ajax를 통해 서버에 요청을 한 후 멈추는 것이 아니라 그 프로그램을 계속 돌아간다.
비동기 방식의 장단점으로는
동기보다 조금 더 복잡하다
결과가 주어지는데 시간이 걸리지만 그 시간동안 다른 작업을 병행할수있다는 장점과 자원을 효율적으로 사용이가능하다는점
Fetch API 란?
일반적으로 자바스크립트에서 API를 연동하기 위해 보통 Fetch API를 사용하곤 했으며 리액트또한 자바스크립트 built-in 라이브러리 중 하나인 Fetch API라는 API연동 모듈을 사용한다.
하지만 Fetch API에서는 자바스크립트 built-in 라이브러리라는 특성때문에 많은 사람들이 axios를 사용하길 선호한다.
Fetch API vs Axios
왜 사람들이 Fetch API보다 Axios를 더 선호할까 ? 동일한 기능을 수행하는 코드를 통하여 비교해보도록 하겠다 .
- Fetch API
body 프로퍼티 사용
url은 ()안에 인자로
body는 stringify()
// fetch API
const url = 'http://localhost:3000/test'
const options = {
method: 'POST',
header: {
'Accept' : 'application/json',
'Content-Type':'application/json';charset=UTP-8'
},
body:JSON.stringify({
name: 'jungho',
age: 23
})
fetch(url.options)
.then(response => console.log(response))
}
- axios
data 프로퍼티 사용
url은 option 객체 안에 값으로
// axios
const option = {
url = 'http://localhost:3000/test'
method:'POST',
header: {
'Accept':'application/json',
'Content-Type': 'application/json';charset=UTP-8'
},
data: {
name: 'jungHo',
age: 23
}
axios(options)
.then(response => console.log(response))
}
axios는 HTTP 통신간에 요구사항을 Compact한 패키지로써 사용하기 쉽게 구성되어 있다.
