클래스 컴포넌트(작성예정)

최근 리액트의 컴포넌트들 작업방식은 대부분 함수형 컴포넌트이

클래스 컴포넌트 예시

import {Component} from "react";

class LifecycleUpdate extends Component{
    static getDerivedStateFromProps(props, state){
        
        console.log("2. getDerivedStateFromProps 호출 :" + props.prop_value);
        console.log(state); 
        
        return {tmp_state : props.prop_value};
    }

    componentDidMount(){
        console.log("4. componentDidMount 호출");
        console.log("5. tmp_state : "+this.state.tmp_state);
        this.setState({tmp_state2:true});
    }

    shouldComponentUpdate(props, state){
        console.log("6. shouldComponentUpdate 호출 / tmp_state2 = "+state.tmp_state2);
        return state.tmp_state2;
    }

    constructor(props){
        super(props);
        this.state = {};
        console.log("1. constructor() 호출");
    }

    render(){
        console.log("3. render함수 호출");
        console.log(this.state);
        return(
            <h2>[render 함수 호출]</h2>
        )
    }
}