[react] state + component life style

state란? component에서 변하는 데이터를 저장하는 Object( 바꿀수 있는 데이터 )

import React from "react"
import PropTypes from "prop-types"

/* class는 function이 아니기 때문에 return 값이 존재하지 않음 
대신 React.Component가 포함하고 있는 render 사용 */
class App extends React.Component {
    //react는 자동적으로 모든 class의 render를 실행한다.

    //component가 render 되기 전에 호출되는 함수 : Mounting -> constructor()
    
    //component가 render 된 후 호출되는 함수 : Mounting -> componentDidMount()
	
    //처음 render 되면 호출되는 component
    componentDidMount(){
        console.log("mount");
    }
    
    // update 진행시 -> state 변경될때(onClick 함수가 실행될때)
    componentDidUpdate(){
        console.log("mount update");
    }

    // 페이지를 떠나거나 이동할때 실행됨
    componentWillUnmount(){
        console.log("Good bye");
    }


    // state는 변하는 데이터(바꿀 데이터)
    state = {
        count: 0
    }

    add = () =>{
        // this.state.count = 0 처럼 state를 직접적으로 변경할수는 없음
        // this.setState를 사용해야함 -> setState를 사용하면 render이 다시 실행됨
        // this.setState({count: this.state.count + 1}); 좋은 방법은 아님
        // state에 의존하지 않고 사용하는 방법 current 현재의 state
        this.setState(current => ({count: current.count + 1}));
    };

    // minus(){} 와 같은 역할
    minus = () => {
        this.setState(current => ({count: current.count - 1}));
    };


    render() {
        console.log("render");
        return (
            <div>
                <h1>This number is : {this.state.count}</h1>
                <button onClick={this.add}>Add</button>
                <button onClick={this.minus}>Minus</button>
            </div>
        )
    }

}

export default App;