React 기초 (5) : 주요 LifeCycle

import React from 'react';

class App extends React.Component {
  constructor() {
    console.log("1. constructing")
  }

  state = {
    count: 0
  }

  add = () => {
    this.setState({ count : this.state.count + 1})
  }

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

  componentDidMount() {
    console.log("2. render completed")
  }

  componentDidUpdate() {
    console.log("3. rerender completed")
  }

  componentWillUnmount() {
    console.log("4. will unmount")
  }
 
  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;

Mounting

1. constructor

class 생성하는 단계

2. render

HTML Element를 index.html에 붙이는 단계

3. componentDidMount

render가 완료된 상태

---

Updating

1. render

무언가 변경되어 다시 render하는 단계

2. componentDidUpdate

update가 완료된 상태

---

Unmounting

1. componentWillUnmount

mount된 내용들이 삭제되기 직전 단계