Planning the movie component

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초뒤 브라우저는  Loading -> Ready로 바뀌게 된다.

 

자 이걸 왜하느냐... 음 실제로는 componentDidMount에서 data를 fetch API를 이용해 가져오게 하는 것이다.

그리고 data fetching이 완료 되면 Ready대신 ㅡ map을 만들고 movie를 render하게 되는 것이다.

첨엔 잘 이해가 안갔는데 다시 보니 이해가 간다. fetch에 대해 더 알아야 겠지만~

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Using Fetch - Web API | MDN

 

https://opentutorials.org/course/3281/20562

fetch API - 생활코딩

이 두곳을 살짝 살펴봤는데 어느정도 이해가 간다~ 서버로부터 data요청해서 비동기 방식으로 가져오는 것~

오키~ 넘어가자.

 

한가지 짚고 넘어갈 것은 나중에 쓸 state를 선언하는 것은 필수가 아니라고 한다.

state오브젝트에 book을 추가하지 않았지만 setState상에서 미리 사용하더라도 에러가 발생하지 않는다.

다시 말하면 setState를 사용할 때 stateobject안에 default값을 미리 선언할 필요는 없다는 것이다.