[react] 노마드코더 영화웹서비스 제작 3.3 Movie 컴포넌트 계획하기

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)
  }//컴포넌트가 마운트되면, 6초 뒤에 isLoading이라는 state를 false로 설정할거야.

  render(){
    const {isLoading} = this.state;
    //this.state.isLoading는 기니까 미리 위에서 선언!
    return(
    <div>{isLoading ? "Loading..." : "We are ready"}</div>
    ) 
  }
}

export default App;

이론적으로 우리가 할 일은 componentDidMount에서 데이터를 fetch하는 것이다.
6초 뒤에 We are ready를 보여주는게 아니라 movie 데이터를 보여주는 것!

API로부터 data fetching이 완료되면 We are ready 대신에 movie를 렌더하고 맵을 만들고 렌더한다.

<정리>

• state는 object이며, component의 데이터를 넣을 공간이 있다. 그리고 이 데이터는 변한다.
• setState는 state를 변경할 때 쓰는 거
• state를 render안에 넣고 싶다면 {this.state.state명} 이렇게 넣는다. 이건 클래스이기 때문이다. {state}라고 하면 안된다.
  this는 부모를 가리킨다.
• this: js를 공부할 때 배우지 못해서 이번에 알아봤다.

this의 값은 어떻게 변화할까? this가 어떤 값과 연결되는 지는 this의 바인딩을 통해서 확인해 볼 수 있다. 바인딩이란, this의 호출 방식에 따라서 this가 특정 '객체'에 연결되는 것이다. this의 바인딩은 일반 함수 내부, 메서드 내부, 생성자 함수 내부, Call, Apply, Bind를 통한 '호출 방식'으로 나눠서 살펴볼 수 있다.
1) 일반 함수 내부에서의 this는 글로벌 객체와 바인딩된다.
2) 메서드 내부에서의 this는 메서드를 호출한 객체와 바인딩된다.
3) 생성자 함수 내부에서 this는 생성자 함수가 생헐할 인스턴스와 바인딩된다.
4) Call, Apply, Bind 메서드 사용 시, 메서드에 첫 번째 인수로 전달하는 객체에 바인딩 된다.