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


프로젝트를 생성하자 


App.js


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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;
 
cs



Movie.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
 
cs



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


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




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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
                "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"
cs


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


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


저작자표시 비영리

'웹 프론트엔드 > React' 카테고리의 다른 글

1. react API를 활용하여 영화 순위 보여주기  (0) 2019.02.06
13. React/리액트 array.map 이해하기  (0) 2018.11.04
12. React/리액트 (props) 복습하기  (0) 2018.11.03
11. React/ 리액트 (컴포넌트 복습)  (0) 2018.11.03
10. React / 리액트 (props 와 state)  (0) 2018.10.27

+ Recent posts

티스토리툴바