axios 설치 명령어(터미널에서)
|
1
|
npm install axios
|
[App.js]
|
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
|
import React from 'react';
import axios from 'axios';
import Movie from './Movie';
class App extends React.Component{
state={
isLoading: true,
movies: []
};
getMovies = async () =>{ // async는 비동기를 말하며 await는 axios함수가 끝날떄 까지 기달리라는 뜻을 가진다.
const {data : {data : {movies}}} = await axios.get('https://yts-proxy.now.sh/list_movies.json?sort_by=rating');
// movies.data.data.movies로 써도 되지만 es6에서는 {data : {data : {movies}}}같은 방법으로도 사용 가능하다.
this.setState({ movies, isLoading:false });
}
componentDidMount(){
this.getMovies();
}
render(){
const {isLoading, movies} = this.state;
return (
<div>{isLoading ? "Loading..." : movies.map(movie => (
<Movie
key={movie.id}
id={movie.id}
title={movie.title}
year={movie.year}
summary={movie.summary}
poster={movie.poster}
/>
))}
</div>
);
}
}
export default App;
|
[Movie.js]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import React from 'react';
import PropType from 'prop-types';
function Movie({id, title, year, summary, poster}){
return <h4>{title}</h4>
}
Movie.PropType = {
id: PropType.number.isRequired,
title: PropType.string.isRequired,
year: PropType.number.isRequired,
summary: PropType.string.isRequired,
poster: PropType.string.isRequired
}
export default Movie;
|
'웹 프로그래밍 > ReactJS' 카테고리의 다른 글
| state 사용법 (0) | 2019.09.09 |
|---|---|
| 기초적인 prop 사용법 (0) | 2019.09.09 |
