[React] axios로 네트워크 통신하기

리액트는 AJAX를 구현하려면 XMLRequest를 사용하거나 다른 HTTP Client를 사용해야 한다.

HTTP Client를 내장하고 있는 Angular와 다르게 따로 내장 클래스가 존재하지 않기 때문이다.

 

AJAX (Asynchronous Javascript And XML)

비동기식 자바스크립트와 xml

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

비동기 통신, 클라이언트와 서버간 XML 데이터를 주고받는 기술

 

비동기 방식

웹페이지를 리로드하지 않고 데이터를 불러오는 방식

서버에 요청한 후 멈추어 있는 것이 아닌 그 프로그램은 계속 돌아감

필요한 부분만 불러와 사용할 수 있다는 장점이 있다.

 

axios VS Fetch API

built-in 라이브러리

axios는 HTTP 통신의 요구사항을 컴택트한 패키지로써 사용하기 쉽게 설계 되었다.

 

Axios

Promise API를 활용하는 HTTP 비동기 통신 라이브러리

• XMLHttpRequest객체 또는 Node.js의 HTTP API 사용
• Promise API 사용
• 요청과 응답 데이터의 변형
• HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경

 

Axios 다운로드

npm i axios

import axios from 'axios'

 

HTTP Methods

클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 수단

 

1. GET

axios.get(url, [,config])

서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도

값이나 상태 등을 바꿀 수 없다.

 

2. POST

axios.post('url 주소", {
    data객체
}, [,config])

새로운 리소스 생성(create)

두번째 파라미터는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용한다.

주소창에 쿼리스트링이 남지 않기때문에 GET보다 안전하다.

axios.post('url',
    {
        contact: 'Dory',
        email: 'dory@gmail.com'
    },
    {
        headers: {
            'Content-type': 'application/json',
            'Accept': 'application/json'
        }
    }
)
.then((response) => { console.log(response.data); })
.catch((response) => { console.log('Error!'); })

 

3. DELETE

axios.delete(url, [,config]);

REST 기반 API 프로그램에서 데이터베이스에 저장되어있는 내용을 삭제하기 위한 목적으로 사용

HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두번째 인자를 아예 전달하지 않는다.

axios.delete('/example/list/10').then(function(response){
    console.log(response);
    }).catch(function(ex){
    throw new Error(ex)
}

 

4. PUT

axios.put(url[, data[, config]])

데이터베이스에 저장되어 있는 내용 갱신 목적

HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있음

 

 

출처 : 

https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API