영화 데이터 화면에 그리기

console.log() 함수로 영화 데이터 출력해 보기

axios.get()으로 잡은 영화 데이터가 movies 변수 안에 들어 있으니까 console.log(movies)를 통해 출력해봅시다.

import axios from "axios";
import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json");
    console.log(movies);
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;

 

[Console] 탭을 {data: {..}, status: 200, ...}와 같이 짧게 표현된 객체가 있을 것입니다. 이게 바로 API로 받아온 영화 데이터입니다.

 

영화 데이터 자세히 살펴보기

왼쪽에 있는 ▶ 표시를 눌러서 펼처보십시오. 객체를 자세히 표시해 줄 것입니다.

 

data 키를 또 펼처보면 그 안에 또 다시 data 키가 들어 있을 것입니다. 자세히 살펴보면 그 안에 movies 배열이 들어 있습니다.

 

객체에 있는 movies 키에 접근하기

import axios from "axios";
import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json");
    console.log(movies.data.data.movies);
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;

movies 변수에는 이제 배열이 들어있습니다.

 

객체에 있는 movies 키에 구조 분해 할당을 사용하여 접근하기

import axios from "axios";
import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const {
      data: {
        data: { movies },
      },
    } = await axios.get("https://yts-proxy.now.sh/list_movies.json");
    console.log(movies);
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;

 

movies state에 영화 데이터 저장하기

this.setState({ movies: movies })와 같이 작성하면 movies state에 영화 데이터를 저장할 수 있습니다.

import axios from "axios";
import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const {
      data: {
        data: { movies },
      },
    } = await axios.get("https://yts-proxy.now.sh/list_movies.json");
    this.setState({ movies: movies });
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;

 

ES6에서는 객체의 키와 대입할 변수의 이름이 같다면 코드를 축약할 수 있습니다.

import axios from "axios";
import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const {
      data: {
        data: { movies },
      },
    } = await axios.get("https://yts-proxy.now.sh/list_movies.json");
    this.setState({ movies });
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;

 

isLoading state true에서 false로 업데이트하기

isLoading state도 false에서 true로 업데이트합니다.

import axios from "axios";
import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const {
      data: {
        data: { movies },
      },
    } = await axios.get("https://yts-proxy.now.sh/list_movies.json");
    this.setState({ movies, isLoading: false });
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;

 

영화 앱을 실행해보면 처음에는 로딩 중...이 화면에 나타나다가, 조금 뒤에 우리는 준비됐어가 화면에 나타납니다.