[react] 생명주기

 

react의 생명주기란 component의 생성, 변경, 소멸 과정을 뜻한다.

 

 

생성 

render(), constructor(), getDerivedStateFormProps(), componentDidMount()

변경

shouldComponentUpdate()

 

 

로그 결과

import React,{Component} from "react";

class ComponentTest extends Component{

    
    /* 1. <생성>
          첫번째로 실행됨. 최초 1회. */
    constructor(props){
        super(props);        
        this.state={};
        console.log("1. constructor log");
    }

   /*  2. <생성>
          두번째로 실행 됨. */
   static getDerivedStateFromProps(props,state){
    console.log("2. getDerivedStateFromProps log");
    console.log(" 2.1 props : " + props.a);
    return {aaaa:props.a};
    //return {};
    }    
 
    
    /* 3. <생성>
          세번째로 실행됨 */
    render(){
        console.log("3. render log");
        
        return(
            <h2>ComponentTest!</h2>
        )
    } 

    /* 4. 
          <생성>
          네번째로 실행됨 
          render()의 리턴으로 html이 그려지고 나서 실행 됨.
          이벤트, 초기화가 여기서 실행되어져야 함.
    */
    componentDidMount(){ 
        console.log("4. componentDidMount log");
        console.log(" 4.1. state.aaaa: " + this.state.aaaa);
        console.log(" 4.2  state.bbbb: " + this.state.bbbb);
        this.setState({bbbb : "x"} );   
        
 
    }    
    
    
    /*
        <변경>
        state의 변경이 일어나면  shouldComponentUpdate() 가 호출된다.
        (componentDidMount에서 this.setState({bbbb : "x"} ); 으로 변경함.)
        
        return이 false일 경우 render()를 재 호출하지 않는다.
    */
    shouldComponentUpdate(props, state){
        console.log("5. shouldComponentUpdate log");
        console.log(" 5.1. state.bbbb: " + state.bbbb);
        //return false; 
        return state.bbbb;
    } 
 

} 
 
export default ComponentTest;