react class 라이프 사이클

import React, { Component } from 'react'

class Test extends Component {
  componentWillMount() {
    console.log('class => componentWillMount')
  }
  componentDidMount() {
    console.log('class => componentDidMount')
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('class => shouldComponentUpdate')
    return true
  }
  componentWillUpdate(nextProps, nextState) {
    console.log('class => componentWillUpdate')
  }

  componentDidUpdate(nextProps, nextState) {
    console.log('class => componentDidUpdate')
  }

  render() {
    console.log('class => render')
    return <div></div>
  }
}

export default Test

componentWillMount는 화면이 만들어지기 전에 호출이 됩니다. 즉 화면이 만들어지기 전에 호출해야할 함수들을 선언해줍니다.

componentDidMount는 화면이 만들어진 다음 호출이 되는 함수 입니다. 즉 화면이 만들어진 후에 처리해야할 로직이 있다면 사용을 합니다.

shouldComponentUpdate(nextProps, nextState) {
    console.log('class => shouldComponentUpdate')
    return true
  }

shouldComponentUpdate는 true를 리턴할 경우 render를 호출해주고 true를 리턴하지 않으면 render를 호출하지 않습니다.

componentWillUpdate(nextProps, nextState) {
    console.log('class => componentWillUpdate')
  }

상태가 변경될 경우 shouldComponentUpdate가 먼저 호출되고 componentWillUpdate가 실행이 됩니다.