[React] 비동기 Axios 사용하기

원래 jQuery 라이브러리를 사용하여 ajax를 통해 비동기 통신을 했었다. 이러한 방식은 React에서도 동일하게 사용할 수 있지만... React를 사용하는데 jQuery는 최대한 안쓰고 써보고싶었다.

우선

비동기? 동기?

동기적 처리는 어떠한 이벤트가 발생하여 코드가 실행될 때, 하나하나 차례대로 처리되는 방식이다. 발생한 이벤트의 처리가 완료되기 전까지는 다른 이벤트(동작)을 할 수 없다.

비동기는 동기 방식과 다르게 이벤트에 의한 결과 값을 받을 때까지 멈춰있지않고 다른 동작을 수행 가능하다.

AJAX (Aysnchronous JavaScript and XML)

• 비동기 자바스크립트와 XML의 약자로, 자바스크립트를 이용하여 서버와 비동기 방식의 통신을 하는 것
• 데이터만 받아와 웹페이지의 리로드 없이 로직을 처리할 수 있다.
  - 기존(동기적)에는 새로운 데이터를 보여주기 위해서는 페이지의 리로드 또는 새로운 페이지로 전환되어야 했다.

Promise

• 비동기를 간편하게 처리할 수 있도록 도와주는 객체(object)
• 비동기 통신에서 순차적이지 않은 실행 방식은 개발자가 원하는 로직을 구성하기에 어려움이 있음. 이를 해결하기 위해 사용 (아니면 콜백함수로 반복해줘도 된다)
• async await 문법 사용하는데 다음에 포스팅 하기로./..

설치

#npm
npm install axios

#yarn
yarn add axios

기본 사용법

1. axios(config)

import axios from 'axios';

// GET, DELETE
axios({
  url: `/rest/v1/user/12`
})

// POST, PUT
axios({
  method: [`post` or `put`]
  url: `/rest/v1/user`
  data: {
  	name: 'test'
	}
})

2. HTTP Method

import axios from 'axios';

axios.get(`/rest/v1/user/12`);
axios.delete(`/rest/v1/user/12`);
axios.post(`/rest/v1/user`, {name: 'test'});
axios.put(`/rest/v1/user`, {name: 'test'});

문제점

서버(API)에서 요구하는 헤더 정보 필요할 때, 매번 직접 작성하여 추가를 해주기에는 많이 번거롭다. 그래서 해당 설정을 캡슐화하여 재사용성을 높여 줄려고한다.

재사용성 높이기

//http-common.js
import axios from 'axios';
export default axios.create({
	baseURL: "/rest/v1",
	headers: {
		'Content-type': 'application/json',
		'Access-Control-Allow-Origin': 'http://localhost:8080' // 서버 domain
	},
  
	withCredentials: true
});

위에서 작성한 커스텀된 axios의 구현체로 ~~Service라는 이름의 axios를 최종 작성하려고한다.

//TestService.js
import httpCommon from 'http-common';

const testGet = (no) => {
  return httpCommon.get(`/test/${no}`);
}

const testDelete = (no) => {
  return httpCommon.delete(`/test/${no}`);
}

const testPost = (rest) => {
  return httpCommon.post(`/test`, rest);
}

const testPut = (rest) => {
  return httpCommon.put(`/test`, rest);
}


export default {testGet, testDelete, testPost, testPut}

사용할 땐 TestService.[~메서드명].then(response => {~~~}) 이렇게 사용하면 된다.

끝!