[리액트 with 노마드코더] axios 세팅

보통 자바스크립트에서는 fetch를 사용하여 데이터를 가져오지만 fetch보다 더 좋은 것이 axios다.

리액트, 뷰와 같은 프레임 워크 안에서 쓰기 딱 좋다.

오늘 강의는 axios를 쓰기 위한 기본 세팅법을 배웠다.

우선 엑시오스(또는 에이시오스) 설치부터 해야

1. npm i axios

2. import axios from "axios";

 

[코드 샘플]

import React from 'react';
import axios from 'axios';

class App extends React.Component{
  state = {
    isLoading: true,
    movies: []
  };
  getMovies = async() => {
    const movies = await axios.get('https://yts.mx/api/v2/list_movies.json');
  }
  componentDidMount(){
    this.getMovies();
  }
  render(){
    const { isLoading } = this.state;
    return <div>{isLoading ? "Loading..." : "We are ready"}</div>;
  }
}

export default App;

- 처음에는 componentDidMount 안에 axios를 통해 바로 데이터를 불러왔다.

- 그러나 axios는 조금 느리다. 데이터를 전부 호출할 때 까지 시간이 좀 걸린다. > 기다려야 한다.

- 기다리기 위한 함수를 실행 시킨다. > async await을 해야함.

 

3. 기다리기 위한 함수 async await 사용하기

ES6 문법을 사용함

myFunction = async() => {

    const variable = await axios.get('{url}');

}

- async를 사용하지 않으면 await을 사용할 수 없음.

- 만약 async를 하지 않으면 자바스크립트는 getMovies 함수가 데이터에 접근하기까지 기다리지 않을 것이다.