[노마드코더/ReactJS로 영화 웹 서비스 만들기]3.2 Component Life Cycle

3.2 Component Life Cycle

life cycle method

• 기본적으로 react가 component를 생성하고 없애는 것

• mounting : component가 screen에 표시되는 것

  • constructor() 호출
  • render() 호출
  • componentDidMount() : component가 처음 render됐다는 것을 알려줌 (render() 이후 적용)

• updating : 사용자가 만든 함수에 의해 update (setState를 호출할떄마다 발생)

  • render() 호출
  • componentDidUpdate () 호출
    (setState 호출 -> component호출 -> renfer 호출 -> 업데이트 완료되면 componentDidUpdate 호출)

• unmounting : component가 죽는 것

  • componentWillUnmount() : component가 떠날 떄 호출

class App extends React.Component
{
  state={
    count:0
  };
  add=()=>{
    this.setState(current=>({count:current.count+1}));
  };
  minus=()=>{
    this.setState(current=>({count:current.count-1}));
  };
  componentDidMount(){//: component가 처음 render됐다는 것을 알려줌 (render() 이후 적용)

    console.log("component rendered");
  }
  componentDidUpdate(){ //component가 update됐을 때 호출
    console.log("I just updated")
  }
  componentWillUnmount(){ //component가 떠날 때 호출

    console.log("Goodbye");
  }
  render(){
    console.log("I'm rendering");
    return (
      <div>
        <h1>The number is {this.state.count}</h1>
        <button onClick={this.add}>Add</button>

        <button onClick={this.minus}>Minus</button>
      </div>
    );
  } 
}