react - 4 lifecycle

render

render()가 발생하면 아래와 같은 메소드가 차례로 호출된다.

• componentWillMount()
• render()
• componentDidMount()

class App extends Component {
  componentWillMount(){
    console.log('will Mount');
  }
  componentDidMount(){
    console.log('did Mount');
  }
  render() {
    console.log('render');
  }
}

componentWillMount()를 통해 해당 컴포넌트의 사이클이 시작되었음을 알게 되고, 

render()를 통해 해당 컴포넌트의 '존재'를 확인하며

componentDidMount()를 통해 컴포넌트가 자리잡았음을 확인할 수 있다.

update 

컴포넌트가 update 되면 아래와 같은 과정을 거친다. 

메소드명이 문장과 같아서 참 이해가 쉬운 듯.

componentWillReceiveProps() 컴포넌트가 새로운 props을 받으면 호출된다.

shouldComponentUpdate() old props와 new props를 각각 확인하고 비교해서 다르면 update==true라고 생각한다.

componentWillUpdate() 위에서 업데이트를 해야 한다고 판단되었으면 호출된다. (이 단계에 spinner 등을 붙일 수 있다.)

render() 업데이트를 반영한다.

componentDidUpdate() 업데이트가 완료되었다. (hide spinner)