React 실습 -8 : Movie Component

우리는 component life cycle을 알게 됐어!!

 

이제 다 삭제.. 하고 movie component를 구성해보자고!

 

알다시피 mount는 생겨나는 것, 태어나는 것, 살아 있는 거야

mount 되자마자 isLoading은 기본적으로 true야

 

기본적으로 Loading이라는 건 명백해

왜냐면 이건 loading 중 이거든

이렇게 작성하고!

return에 삼항 연산자로 추가해보자!

react 아니야 JS야! 그러니까 삼항 연산자가 되는 거야!! 생각해야 돼 JS!!

isLoading이 true면 Loading, false면 We are ready를 보여 줘!

 

결과는?

응 오류야..

이제 감이 오지?

정의되지 않았거든

우리는 항상 this.state를 사용해야 해!!

isLoading 앞에 this.state를 붙여주려고 했는데 항상 this.state를 타이핑하고 싶지 않지?

그래서 ES6의 새로운 기능을 사용할 거야!

와우...

런 해보자!!

오케이! 동작하고 있네!

 

여기서 퀴즈!!!

우리가 처음 render 하면 호출되는 life cycle method가 뭘까? 이렇게라도 알아야 해...

 

오! 정확해!(맞췄기를..)

 

 

정답은!

componentDidMount!!

그럼 이걸 이용해서 setTimeout까지 해보자고!

런 해보면!

3초 후에 isLoading false의 값인 We are ready가 나오지!

 

이론적으로 우리가 할 일은 componentDidMount에서 data를 fetch 하는 거야

그리고 API로부터 data fetch가 완료되면

'we are ready' 대신 movie를 render 하고 map을 만들고 movie를 render 하는 거지!

멋져 멋져~

 

이제 해보자고!

일단 movie state를 만들어야겠지!

지금은 빈 array지만 후에 이 배열에 많은 것들로 가득 채울 거야!

 

여기서 궁금증!

만약 시작 할 때 state에 뭔가 가지고 있는데 book: true 처럼 뭔가 추가하면 에러가 생길까?

Nooooooooope!

에러는 생기지 않아!

미래를 위해 계획한 것 뿐이야! 

 

 

끝!

 

 

참조: nomadcoders.co