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 |
