11.3 Planning the Movie Component

자 그럼 Movie Component를 구성해보자.

 

mount되지마자 isLoading은 기본적으로 true로 정해놓고 다음과 같이 return해주자~!

import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
  };
  render() {
    return <div>{this.state.isLoading ? "Loading" : "We are ready"}</div>;
  }
}

export default App;

근데 this.state다 입력하기 힘드니 다음과 같이 바꿔주자~!

그럼 다음과 같이 출력된다.

 

자 맨처음에는 

componentDidMount가 component가 mount되자마자 호출된다.

 

자 그럼 delay function인 setTimeout을 넣어보자.

 

그럼 6초후에 isLoading이 false가 됨으로 다음과 같은 화면이 6초 후에나타나게 된다.

기본

6초 후 나타남

/*

자 그럼 componentDidMount에서 data를 fetch해보자.

그럼 we are ready 대신에 movie를 render하고 map을 만드록 movie를 render해보자.

*/