리액트 axios 라이브러리 사용하기

리액트에서 promise를 기다릴 때 fetch api를 사용하면  두가지 문제점이 생긴다. 하나는 호환성이 낮은 explorer와 같은 브라우저를 사용할 때 호환이 안되는 문제이고 fetch api를 사용할 경우 key를 url주소로 받아와야하기 때문에 가독성이 떨어진다는 단점이 존재한다. 

 

따라서 위의 두 문제를 해결하기 위해 axios라는 라이브러리를 사용하는데 리액트로 개발을 하는 경우 yarn을 통해 패키지 관리를 하고 있다면 yarn add axios 라는 명령어 하나로 쉽게 설치가 가능하다. 

 

axios 설치

axios가 설치되면 fetch를 사용하는 곳에서 변경이 가능한데 promise를 생성하는 객체의 생성자에서 axios.create명령어를 이용해서 axios를 만들어주면 된다. 이 때 axios를 만들 때에는 공통적으로 사용되는 baseURL과 params는 어떤 방식으로 받아올 지를 설정해줄 수 있다. 

 

예를 들어 youtube에서 받아오는 경우 다음과 같이 설정할 수 있다. 

constructor (key)
    {
        this.client = axios.create({
            baseURL: 'https://www.googleapis.com/youtube/v3',
            params: {key: key}, 
        });

그 후 밑에 비동기 함수에서 response를 이 client의 get함수를 사용해서 받아와주면 된다. part는 api에 json형식으로 나타난 key와 값을 나타내주면 된다. 

const response = await this.client.get('videos' , {params: {part: 'snippet', chart: 'mostPopular' , maxResults: '25',},})

그 후 response의 data의 원하는 값을 return하면 된다. 

 

원하는 값을 리턴