- Data를 가져와서 사용할때 쓰인다.
async
: 무언가 실행이 완료 되길 기다렸다 다음 코드를 진행 하고 싶을때 사용한다
: 얘는 기다려야만 하는 함수!
뭘 기다려? await를!
await는 axios가 끝나기를 기다렸다가 그 뒤에 코드를 진행한다.
아래 예시와같은 경우 영화 데이터를 get 해올때까지 기다린다.
import React from "react";
import axios from "axios";
import Movie from "./Movie";
class App extends React.Component {
state = {
isLoading: true,
movies: []
};
// async : 비동기 -> 너는 기다려야만 하는 함수 ( 기다려야 해! )
getMovies = async () => {
//data fetch : 데이터를 가져오다
//axios : fetch 위에 있는 작은 layer
//await은 axios 가 끝날때 까지 기다림
const { data: { data: { movies } } } = await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");
//{ data: { movies } } } == movies.data.data.movies
// this.setState({movies : movies}); 이렇게 써야하지만 아래처럼 써도 작동한다 왜냐? javascript는 똑똑하니까
this.setState({ movies, isLoading: false }); // 위에서 await를 걸어뒀기 때문에 데이터가 다 받아져야만 set이 실행된다
}
componentDidMount() {
this.getMovies();
};
render() {
// js 의 es6
const { isLoading, movies } = this.state;
return <div>{isLoading ? "Loading..."
: movies.map(movie => (
<Movie
key={movie.id}
id={movie.id}
year={movie.year}
title={movie.title}
summary={movie.summary}
poster={movie.medium_cover_image} />
))}</div>
}
}
export default App;
Movie.js
import React from "react";
import PropTypes from "prop-types";
function Movie({id, year, title, summary, poster}) {
return <h1>{title}</h1>
}
Movie.propTypes = {
id: PropTypes.number.isRequired,
year: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
summary: PropTypes.string.isRequired,
poster: PropTypes.string.isRequired
}
export default Movie;
결과 화면
'React' 카테고리의 다른 글
[react] state + component life style (0) | 2021.09.02 |
---|---|
[react] PropType (0) | 2021.08.26 |
[react] Key warning (0) | 2021.08.26 |
[react] Components with JSX + Props + 동적데이터 (0) | 2021.08.26 |
[react] 설정 (0) | 2021.08.26 |