[React] 백엔드 서버와 통신할 수 있는 Axios 사용해보기

Axios란?

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

HTTP 요청을 보내고 응답을 받는데 필요한 다양한 기능을 제공하기 때문에 쉽게 서버와 통신할 수 있다.

즉, 프론트엔드 입장에서 백엔드 서버에 통신하는 라이브러리로 우리가 흔히 아는 Ajax와 비슷하다고 생각하면 된다.

 

Ajax는 XML 형태의 데이터를 주고받는 통신 방법으로 Jquery를 이용해서 쉽게 구현할 수 있지만, Promise 기반이 아니기 때문에 then/catch를 사용할 수 없다는 단점이 있다.

반면, Axios는 Promise API를 사용하기 때문에 then/catch를 이용해서 response 데이터를 쉽게 다룰 수 있다.

Axios에 대한 자세한 정의는 공식 문서(https://axios-http.com/)에서 확인할 수 있다.

 

사용 방법

npm install axios --save

우선 라이브러리이기 때문에 별도의 설치가 필요하다. (--save는 옵션이다.)

 

axios.get('https://...')
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    })

먼저 간단하게 get으로 서버에 요청을 보내는 방법이다. get() 안에 URL을 넣어주고, then과 catch를 이용해서 응답을 받을 수 있다.

 

axios.post('http://...', {
    name: 'Shawn',
    email: 'ksh_729@naver.com'
})
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    })

post도 위와 같은 방식으로 사용할 수 있다. URL 뒤에 객체로 데이터를 전달한다.

 

axios.create({
    baseURL: 'https://...',
    params: {
        api_key: 'abcdefg',
        language: 'ko-KR'
    }
})

axios.get('/users')
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    })

Axios에서는 create를 통해 미리 URL과 파라미터 등을 지정할 수도 있다. 이것을 인스턴스화라고 하는데 매번 서버에 요청할 때 모든 주소를 일일이 입력하는 것은 효율적이지 못할 수 있다. 따라서, 미리 인스턴스화해서 쉽게 가져다가 쓰면 된다.

 

baseURL은 요청을 보낼 서버 URL이다. params는 URL 뒤에 붙는 쿼리 스트링이다. 위의 코드를 예시로 보면, 서버에 요청을 하게 되면 'https://.../users/?api_key=abcdefg&language=ko-KR'로 요청이 전송되는 것이다.

(위 코드에서 create와 get은 메서드 체이닝이 가능하기도 하다.)

 

const instance = axios.create({
    baseURL: 'https://...',
    params: {
        api_key: 'abcdefg',
        lang: 'kor'
    }
})

const getUser = async () => {
    try {
        const user = await instance.get('/user');
        console.log(user);
    } catch (err) {
        console.log(err);
    }
}

Axios 인스턴스를 async-await과 함께 사용하면 다음과 같이 사용할 수 있다.

변수 instance에 axios.create가 할당되어 있으므로 user 정보를 불러올 때 instance.get()을 해준다.

 

const instance = axios.create({
    baseURL: 'https://...',
    params: {
        api_key: 'abcdefg',
        lang: 'kor'
    }
})

const requests = {
    fetchUser: '/users',
    fetchMovie: '/movie',
    ...
}

const getUser = async () => {
    try {
        const user = await instance.get(requests.fetchUser);
        console.log(user);
    } catch (err) {
        console.log(err);
    }
}

인스턴스를 만들고, 서버에 요청을 할 때 하나의 요청이 아닌 여러 개의 요청을 받아야 하는 경우가 있을 수 있다.

이럴 경우에는 위 코드처럼 requests 객체를 만들어서 그 안에 요청받을 여러 개의 path 주소를 담고 요청할 때마다 해당 객체에서 불러와주면 조금 더 깔끔하고 효율적이게 사용할 수 있다.

 

// Api.js
export default const instance = axios.create({
    baseURL: 'https://...',
    params: {
        api_key: 'abcdefg',
        lang: 'kor'
    }
})

// App.js
import axios from './Api.js';
const App = () => {
    const getUser = async () => {
        try {
            const user = await axios.get('/user');
            console.log(user);
        } catch (err) {
            console.log(err);
        }
    }
}

리액트에서는 위와 같이 사용할 수 있다. Api라는 컴포넌트를 만들고 그 안에는 axios.create()를 통해 서버 통신 정보를 담아준다. 그리고, axios를 사용할 컴포넌트 (위 코드에서는 App 컴포넌트)에서 Api 컴포넌트를 axios로 import 해준 다음,

axios.get()으로 데이터를 받아올 수 있다.

 

axios.create({
    baseURL: 'https://...',
    timeout: 3000
})

axios.get('https://...', {
    timeout: 5000
})

// OR

axios.create({
    baseURL: 'https://...',
    timeout: 5000
})

axios.get('/users')
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    })

Axios에는 timeout도 설정이 가능한데, timeout이란 특정 시간을 정해놓고 서버와의 통신 시간이 특정 시간 이상일 경우 catch로 보내 에러를 출력하게 하는 기능이다. 쉽게 말해, 특정 시간 안에 불러오지 못하면 그냥 에러 처리하는 기능이다.

create와 get 등 모든 방식에서 사용 가능하며, 인스턴스화해서 사용할 경우 create에만 timeout 속성을 주면 이 인스턴스를 사용하는 모든 요청들에도 똑같은 timeout 속성이 부여된다.

 

서버와 통신하는 방법은 Axios 외에도 많지만, 실무에서 가장 많이 쓰이기도 하고 Promise를 사용하여 편리하게 데이터를 조작할 수 있다는 점에서 여러모로 장점이 많은 서버 통신 방법인 것 같다.

 

1. axios.get('https://...') 이런 식으로 서버에 요청
2. 인스턴스 만들기 : axios.create({ baseURL: 'https://...', ... })
3. async-await과 함께 사용하면 좋다.
4. 서버에 응답을 받을 때는 try-catch 문과 함께 사용한다.