1. 리액트 16.3 버전 이전

컴포넌트 생성 및 Mount

class Component extends React.Component {
    <u>**constructor**</u>(props) {
      super(props)

      console.log("constructor")
    }

    <u>**render**</u>() {
      console.log("render")

      return (
        <div></div>
      )
    }

    <u>**componentWillMount**</u>() {
      console.log("componentWillMount")
    }

    <u>**componentDidMount**</u>() {
      console.log("componentDidMount")
    }
  }

• 함수 호출 순서

  1. constructor : 컴포넌트 생성의 첫 번째 단계

  2. componentWillMount : 컴포넌트가 렌더링 되기 직전

  3. render : HTML이 화면에 렌더링되는 시점

  4. componentDidMount : 컴포넌트가 렌더링 된 직후 한번만 실행

컴포넌트 props, state 변경

// props를 새로 지정한 직후
componentWillReceiveProps(nextProps) {

}

// 컴포넌트가 재 렌더링되기 직전
componentWillUpdate(nextProps, nextState) {

}

// 컴포넌트가 재 렌더링된 직후
componentDidUpdate(prevProps, prevState) {

}

// true를 반환하면 render 함수 재호출 O,
//false를 반환하면 render 함수 재호출 X
shouldComponentUpdate(newProps, newState) {
	// 리턴 기본값은 true
}

• componentWillReceiveProps : state의 변경에 반응하지 않는다.
• shouldComponentUpdate : props 또는 state 둘 중에 하나라도 변경되면 호출된다.

컴포넌트 Unmount

componentWillUnmount() {
	// 컴포넌트가 사라지기 전에 
}

2. 리액트 16.3 이후 버전

변경된 함수

componentWillMount, componentWillReceiveProps
=> <u>**static**</u> <u>**getDerivedStateFromProps**</u>(nextProps, prevState) {
			console.log('~~')
			return { 새로운 state }	
		}

<u>****</u>componentWillUpdate
=> <u>**getSnapshotBeforeUpdate**</u>(prevProps, prevState) {
		return 값	
	}

<u>****</u>componentDidUpdate(prevProps, prevState)
=> componentDidUpdate(prevProps, prevState, <u>**snapshot**</u>)

• getDerivedStateFromProps : 새로운 props를 받고 나서 state가 변경될 때 호출. 렌더링 되기 직전에 호출. props에 의존하는 state가 존재할 때 사용한다. 특정 객체를 반환해야 하는데, 그 반환되는 객체는 새로운 state로 설정이 된다.