[movie_app_4] loading state

loading state

메타데이터를 api에서 불러오는것처럼 componentDidMount()를 통해 5초 뒤에  setState해줌.

componentDidMount(){

setTimeout(() => {

this.setState({

movies: [

{

title: "500 Days of Summer",

poster: "http://notefolio.net/data/img/7d/e1/7de135370df4e9402ae4ee8f26d881cbab0fe7485deb7ce6efaf404cd7969a73_v1.jpg"

},

{

title: "DeadPool",

poster: "http://file.thisisgame.com/upload/tboard/user/2015/12/02/20151202103641_1460p.jpg"

}

]

})

}, 5000)

}

5초 후 setState가 되기 전에 state가 비어있기 때문에 오류가 발생

TypeError: Cannot read property 'map' of undefined

App.render

src/App.js:39

36 | render() {
37 | return (
38 | <div className="App">
> 39 | {this.state.movies.map((movie, index) => {
40 | return <Movie title={movie.title} poster={movie.poster} key={index} />
41 | })
42 | }

매핑부분을 함수로 빼고, 조건문을 걸어놓음

_renderMovies = () => {

const movies = this.state.movies.map((movie, index) => {

return <Movie title={movie.title} poster={movie.poster} key={index} />

})

return movies;

}

render() {

return (

<div className="App">

{this.state.movies ? this._renderMovies() : 'Loading'}

</div>

);

}

함수명에 언더스코어를 쓰는 이유? 리액트는 자체 기능이 많기 때문에 차이를 두기 위해