react component lifycycle (16.3ver이전)

react component lifecycle : 탄생에서 죽음까지 여러지점에서 개발자가 작업가능하도록 메서드 오버라이딩

***declarative(lifecycle을 선언적으로 표현해 이를 사용)
1.initilization
//constructor가불리고 props와 state 세팅
2.mounting  
//componentWillmount > render > componentDidmount
3.Updation(props,state 변경 )
-props(componentWillRecieveProps 추가만 state와 다른점)
//componentWillRecieveProps>shouldComponentUpdate>comonentWillUpdate>render>componentDidUpdate
-state(
//shouldComponentUpdate(boolean:불필요하게 렌더되는 것 방지) >componentWillUpdate>render

>componentDidUpdate)
4Unmounting(componentWillUnmount:사라지기 직전) 


component 생성(객체화) 및 마운트(그리는 구간)  (< 16.3)
constructor 
componentWillMount //16.3 이후로는 duplicatae될 예정
render(최초렌더)  -> 최초 마운트로 봄
comonentDidMount (보통 여기서 timer처리, api 요청)

 

  <div id="root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">

//***component initilization, mounting
class App extends React.Component{
  state = {
      age:39,
    };
    interval = null;
//인스턴스화
    constructor(props){
      super(props);
      console.log("constructor",props)
    }

  render(){
    console.log('render');
//****mount
    return(
      <div>
          <h2>
            Hello {this.props.name} - {this.state.age}
          </h2>
      </div>
    )
  }
  componentWillMount(){
    console.log("componentWillMount");
  }
  componentDidMount(){
    console.log("componentDidMount");
    this.interval = setInterval(()=>{
    //  console.log("setInterval");
      this.setState((state) => ({...state,age: state.age + 1}))
    },1000);
  }

//****updation
  componentWillReceiverops(nextProps){
    console.log('componentWillReceiverops',nextProps);
  }
  shouldComponentUpdate(nextProps,nextState){
    console.log('shouldComponentUpdate',nextProps,nextState);
    //return이 불린형태
    return true;
  }
  componentWillUpdate(nextProps,nextState){
    console.log('componentWillUpdate',nextProps,nextState);
  }
  componentDidUpdate(prevProps,prevState){
    console.log('comonentDidUpdate',prevProps,prevState);
  }

  //unmounting
  componentWillUnmount(){
    clearInterval(this.interval);
  }
}
ReactDOM.render(<App name ="MARK" />,document.querySelector("#root"));
</script>