#3.3 Planning the Movie Component

#3.3 Planning the Movie Component

🧁 이번시간에는 우리 Movie App의 컴포넌트를 계획해볼 것이다.

 

우선 어플리케이션을 mount하자마자(mount: 컴포넌트가 생겨나는 것) state에 isLoading 변수를 true라고 선언해준 후, render에서 div 코드 안에 isLoading이 true라면 "Loading…"을, isLoading이 false라면 "We are ready"를 표시하도록 작성해준다.

원래는 this.state.isLoading이라고 적어주어야 하지만 ES6 문법을 통해 저렇게 적어주었다!

 

import React from "react";

import PropTypes from "prop-types";

class App extends React.Component{

  state = {

    isLoading: true

  }

  render(){

    const {isLoading} = this.state;

    return (

    <div>

      {isLoading? "Loading..." : "We are ready"}

    </div>

  );

  }

}

export default App;

 

그 다음, 컴포넌트가 mount 되자마자 호출 될 메소드인 componentDidMount를 작성해준다.

 

import React from "react";

import PropTypes from "prop-types";

class App extends React.Component{

  state = {

    isLoading: true

  };

  componentDidMount(){

    setTimeout(() => {

      this.setState({isLoading : false});

    }, 6000);

  }

  render(){

    const {isLoading} = this.state;

    return (

    <div>

      {isLoading? "Loading..." : "We are ready"}

    </div>

  );

  }

}

export default App;

componentDidMount는 isLoading 변수를 false로 바꾸어주고, 이것은 mount가 생성된 후 6초 뒤에 실행된다. 실제로 실행해보면 처음에 Loading … 이었다가 6초 후에 We are ready로 바뀌는 것을 볼 수가 있다.

 

다음으로 우리가할 일은 componentDidMount에서 데이터를 fetch 하는 것이다. 그리고 API로부터 data fetching이 완료되면, we are ready 대신에 movie를 render하고 map을 만들고 movie를 렌더하는거야

 

아직 이번 영상에서 할 것은 아니지만, 미리 state 안에 movies를 배열로 선언해주었다.

사실 state에 미리 선언해놓지 않았더라도, setState메소드를 가지고 그 당시에 필요할 때 새 변수에 값을 할당해주어도 된다.(예를 들면 state에 movies가 선언되지 않은 상태에서 setState 메소드를 통해 movies에 어떠한 값을 넣는 것은 오류가 아니다. )

 

import React from "react";

import PropTypes from "prop-types";

class App extends React.Component{

  state = {

    isLoading: true,

    movies: []

  };

  componentDidMount(){

    setTimeout(() => {

      this.setState({isLoading : false});

    }, 6000);

  }

  render(){

    const {isLoading} = this.state;

    return (

    <div>

      {isLoading? "Loading..." : "We are ready"}

    </div>

  );

  }

}

export default App;