Enjoy Programming

지난 포스팅에 이어 영화를 랜더링해보겠다. api를 통해 얻어온 movies를 console.log해보면 이렇게 data를 확인 할 수 있다. 이번엔 movies.data.data.movies를 콘솔창에 띄워보자 이렇게 각 영화의 id~ url~ title~등등 정보를 확인 할 수 있다. 이제 render method에서 isLoading이 false로 바뀌면 ready를 리턴하도록 되어 있는데 movie data를 리턴하도록 바꿔보자. Movie.js파일을 하나만들고 역시 react와 Prop-types를 import 해주자. 그리고 movie component는 state가 필요없으므로 굳이 class component로 만들 필요가 없다 function component로 만들어보자. Movie 컴..

component 의 life cycle까지 알아보았고. 이제 movie app을 만들기 위해 movie component를 구성해본다. state를 만들어주고 기본적으로 컴포넌트가 마운트 되면 라이프 사이클이 시작된다. 라이프 사이클은 마운트 되는 순간 시작되었으니 isLoading은 당연히 true이다. render에서 isLoading이 true이면 Loading을 아니라면~ Ready라고 알려준다. 자 이제 로딩이 끝나면 ready로 변경이 되어야 하는데~ 컴포넌트의 render를 하면 호출되는 life cycle method인 componentDidMount함수를 통해 setTimeout함수로 5초뒤 setState를 이용해 isLoading을 false로 바꿔준다. 6초뒤 브라우저는 Loadi..