componentDidMount() 응용.

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.isLoading ? "Loading" : "We are Ready"}

이것은 ES6 문법으로 바꿔 써볼 수 있다.

 

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

 

 

1. 

import React from "react";

class App extends React.Component {
  state = {
    isLoading: true
  };
  
  componentDidMount() {
    setTimeout(() => {
      this.setState({ isLoading: false })
    }, 4000);  
  }

  render() {
    const { isLoading } =  this.state ;
    return <div>{isLoading ? "Loading..." : "We are Ready"}</div>;
  }
}

export default App;

componentDidMount() 에서 data를 fetch 하고 있는 모습이다.

4초 후에 Loading 이 We are Ready로 바뀐다.

 

 

API에 접목시키면,

API 로부터 data fetching이 완료되면 We are Ready 부분이 movie를 render 하고 map을 만들고 render가 가능하다.