2. react API를 활용하여 영화 순위 보여주기

1. create-react-app <projectName>
2. cd projectName
3. yarn start
 

프로젝트를 생성하자 

App.js

(당일로 조회하면 데이터가 없다 그래서 하루 전 데이터를 조회하기위해 getData -1)을 했다.

import React, { Component } from "react";
import "./App.css";
import Movie from "./Movie";
 
const key = "발급받은 키";
 
const getDate = new Date();
const yDate = getDate.getTime(1 * 24 * 60 * 60 * 1000);
getDate.setTime(yDate);
var yYear = getDate.getFullYear();
var yMonth = getDate.getMonth() + 1;
var yDay = getDate.getDate() - 1;
 
if (yMonth < 10) {
  yMonth = "0" + yMonth;
}
if (yDay < 10) {
  yDay = "0" + yDay;
}
const resultDate = yYear + "-" + yMonth + "-" + yDay;
 
const res = resultDate.slice(0, 10).replace(/-/g, "");
 
class App extends Component {
  state = {};
 
  componentDidMount() {
    this._getMovies();
  }
 
  _renderMovies = () => {
    const movies = this.state.movies.map((dailyBoxOfficeList, index) => {
      return (
        <Movie
          rank={dailyBoxOfficeList.rank}
          movieNm={dailyBoxOfficeList.movieNm}
          key={index}
        />
      );
    });
    return movies;
  };
 
  _getMovies = async () => {
    const movies = await this._callApi();
    this.setState({
      movies
    });
  };
 
  _callApi = () => {
    return fetch(
      `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${key}&targetDt=${res}&itemPerPage=10`
    )
      .then(a => a.json())
      .then(json => json.boxOfficeResult.dailyBoxOfficeList)
      .catch(err => console.log(err));
  };
 
  render() {
    const { movies } = this.state;
    return (
      <div className={movies ? "App" : "App-loading"}>
        {movies ? this._renderMovies() : "로딩중 ..."}
      </div>
    );
  }
}
 
export default App;
 

Movie.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import "./Movie.css";
 
function Movie({ rank, movieNm }) {
  return (
    <div className="Movie">
      <h1>
        {rank}위:{movieNm}
      </h1>
    </div>
  );
}
 
Movie.propTypes = {
  rank: PropTypes.string.isRequired,
  movieNm: PropTypes.string.isRequired
};
 
export default Movie;
 

  {movies ? this._renderMovies() : "로딩중 ..."}

데이터가 있으면 보여주고 그렇지 않으면 로딩중이라고 처리를 한다.

순위랑 영화이름만 가져왔는데 추가로 

                "rnum": "1",
                "rank": "1",
                "rankInten": "0",
                "rankOldAndNew": "OLD",
                "movieCd": "20180290",
                "movieNm": "아쿠아맨",
                "openDt": "2018-12-19",
                "salesAmt": "3482471050",
                "salesShare": "33.8",
                "salesInten": "1154445750",
                "salesChange": "49.6",
                "salesAcc": "33936773431",
                "audiCnt": "384114",
                "audiInten": "96420",
                "audiChange": "33.5",
                "audiAcc": "3875972",
                "scrnCnt": "1158",
                "showCnt": "4594"

더 많은 데이터를 제공하니 수정해서 연습해봐야겠다.~

그리고 극한직업? 재밌나보다 보러가야겠다~