4-2. React에서 Axios 사용하기

Axios 추가

yarn add axios

 

(기타 axios를 사용하는 다양한 방법)

Axios의 장점

Axios의 인스턴스를 생성 할 수 있다!

baseUrl, headers, timeout 등을 axios의 instance로 생성하여 여러곳에서 반복해서 작성할 필요가 없다!

instance에 작성할 수 있는 항목은 axios깃헙을 참고하면 된다!

 

그럼 앞서 알아본 the movie db api를 사용하기 위한 instance를 생성해보자!

(api.js 를 생성해 따로 작성하였다)

import axios from "axios";

const api = axios.create({
    baseURL: "https://api.themoviedb.org/3/",
    params:
        api_key: "${api_key}", // 각자 발급받은 api key값을 적어주자!
        language: "en-US"
    }
})

themoviedb의 api는 baseURL뒤에 쿼리스트링(?key=value)형태로 api_key와 language를 함께 사용하고 있다. 그에 맞춰 baseURL과 params 값을 작성했다.

axios의 instance로 생성한 api가 잘 작동하는지 확인하기 위해 아래 내용을 api.js에 덧붙였다.

api.get("tv/popular");

export default api;

이제 index.js 에서 아래와 같이 소스를 추가해보자

import api from './api.js';

 

개발자도구의 Network 탭을 켜고 새로고침을 해보면!

위와 같이 popular api에 params에 지정해준 쿼리스트링을 들고 api 호출을 성공적으로 처리한 것을 확인할 수 있다.