오늘의 진도
#3.0 STATE(#3.1~#3.3)

#3.0 STATE

#3.1 All you need to know about State

state를 바꾸고 싶다면 setState
setState를 호출할 때마다 react는 새로운 state와 함께 render function을 호출

class App extends React.Component {
  state = {
    count: 0
  }
  add = () => {
    this.setState(current => ({ count: current.count + 1 }));

  };
  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };
  render() {
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

this.setState({ count: this.state.count + 1 }); 보다
this.setState(current => ({ count: current.count + 1 })); 가 좋은 방법

#3.2 Component Life Cycle

life cycle method: 기본적으로 react가 component를 생성, 삭제하는 방법

• Mounting: (=being born, 생겨나는 것)
  constructor()이라는 함수가 먼저 호출됨. 이 함수는 react에서 오지 않음. javasript에서 class를 만들 때 호출되는 것임.
  즉, component가 mount될 때, screen에 표시될 때, website에 갈 때 constructor를 호출함.
  그 후 render() 호출.
  componentDidMount()는 기본적으로 "이 component는 처음 render 됐다"라는 것을 알려줌.(rendering이 되면 알려줌)
  

• Update: 일반적인 업데이트
  업데이트? -> 실습에서 add 또는 minus 버튼을 클릭해서 state를 변경하는.. 그런 것이 업데이트
  component가 업데이트 되면 실행되는 몇가지 함수 -
  componentDidUpdate(): setState를 호출하면 component를 호출하고, 먼저 render를 호출한 다음 업데이터가 완료되었다고 말하면 componentDidUpdate가 실행

• Unmounting: component가 죽는것(페이지를 바꿀 때, state를 사용해 component를 교체할 때..등)
  componentWillUnmount()는 component가 떠날 때 호출 됨.

#3.3 Planning the Movie Component

➡ isLoading이 true라면 "Loading...", false라면 "We are ready"

처음에 render하면 호출되는 life cycle method는?
➡ componentDidMount

setTimeout(): delay function

setState를 사용할 때 state 안에 default 값들을 선언할 필요❌

총 코드

import React from 'react';
import PropTypes from "prop-types";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: []
  };
  componentDidMount() {
    setTimeout(() => {
        this.setState({ isLoading: flase });
    }, 6000);
  }
  render() {
    const { isLoading } = this.state;
    return <div>{isLoading ? "Loading..." : "We are ready"}</div>;
  }
}

export default App;

나가기 전에 조금 더 들으려고 했는데,,🙄