ReactJS 3일차

#3.0 Class Components and State

• class react component는 return을 가지지 않는다.
  function이 아니고 class이기 때문이다. class component는 class이지만 react component로부터 확장되고 screen에 표시된다. 그렇기 때문에 reder method를 가지고 있다. render함수에 HTML을 넣어준다.
• react는 자동적으로 모든 class component의 render method를 실행하고자 한다.
• class component는 state때문에 사용한다.
• state는 object이고 component의 data를 넣는다. 여기서 data는 변하는 값이다.

import React from "react";

class App extends React.Component{
  state={
    count: 0
  };
  render() {
    return (
    <div>
      <h1>The number is: {this.state.count}</h1>
    </div>
    );
  }
}

export default App;

---

#3.1 All you need to know about state

• 매번 state의 상태를 변경할 때 react가 render function을 호출해서 바꿔주어야 한다.
• setState 사용하지 않으면 새 state와 함께 render function이 호출되지 않는다. setState를 호출할 때 마다 react는 새로운 state와 함께 render function을 호출한다.

import React from "react";

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>//add()로 하면 함수를 바로 실행한다. add로 해야한다.
      <h1>The number is: {this.state.count}</h1>
      <button onClick={this.add}>Add</button>
      <button onClick={this.minus}>minus</button>
    </div>
    );
  }
}

export default App;

---

#3.2 Component Life Cycle

life cycle method는 기본적으로 react가 component를 생성하고 없애는 방법이다.

• Mounting
  1. constructor()
  2. recder()
  3. componentDidMount()

• Updating
  1. recder()
  2. componentDidUpdate()
  - setState를 호출하면, component를 호출하고, 먼저 render를 호출한 다음 업데이터가 완료되었다고 말하면 componentDidUpdate가 실행된다.

• Unmounting
  1. `componentWillUnmount()'
  - console에는 안찍히지만 component가 떠날 때 호출된다.

---