• 실행시
  • constructor → render() → componentDidMount()
• 화면이 업데이트 되는 경우
  • render() → componentDidUpdate()
• 컴포넌트가 화면에서 떠날 때
  • componentWillUnmount()

App.js

import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props);
    console.log('hello');
  }

  componentDidMount() {
    console.log('component rendered');
  }

  componentDidUpdate() {
    console.log('I just updated');
  }

  componentWillUnmount() {
    console.log("goodbye")
  }

  state = {
    count: 0,
  };

  add = () => {
    this.setState(
      current => ({
        count: current.count + 1,
      })
    );
  }

  minus = () => {
    this.setState(
      current => ({
        count: current.count - 1,
      })
    );
  }

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

export default App;