React JS_Axios

#4.0 ~ #4.5

아래 강의 중 'ReactJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다.

https://academy.nomadcoders.co/courses

Academy

 

 

1. Axios

일반적으로 자바스크립트에서 데이터 fetch하는 방은 fetch를 사용하는 것이다. 하지만 더 좋은 방법인 axios가 있다. 왜 더 좋은지는 둘다 사용해봐야 알 것 같다. 일단 구글링에 의하면,  axios가 보다 사용하기 편리하며 fetch보다 더 많은 기능을 가지고 있는것 같다. axios는 fetch 위에 있는 작은 layer라고 생각하면 된다. 

 

axios를 사용하기 위한 단계는 다음과 같다.

1. axios 설치한다. (터미널에 npm i axios 입력)

2. import axios from 'axios';

3. 사용할 API의 주소(url)을 복사한다.

4. axios.get(url)를 통해 값을 가져온다.

5. axios가 데이터를 모두 가져올때까지 기다려야 하므로,

    5-1. componentDidMount를 이용한다.

    5-2. axios를 가져오는 함수가 비동기라고 알려야 한다. (async - await)

//4, 5번
getMovies = async () => {
  const movies = await Axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");
};
  
componentDidMount() {
  this.getMovies();
}

 

이렇게 axios를 통해 받아온 데이터를 state에 넣기 위해서는 setSatet를 이용한다. const{data:{data:{movies}}} 는 es6의 기능으로 보다 짧게 코드를 작성할 수 있도록 한다. this.setState({movies: movies}) 는 받아온 데이터 movies를 state 배열 movies에 넣는 것이다. 이를 줄여서 this.setState({movies})라 작성해도 된다. 

state = {
  isLoading: true,
  movies: []
};
  
getMovies = async () => {
  const {
    data: {
      data: { movies }
    }
  } = await Axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");
  this.setState({movies, isLoading: false});
};