[React] 컴포넌트의 생명 주기

리액트에서 사용되는 컴포넌트들의 생성 주기에 대해서 알아보겠습니다.

 

컴포넌트의 생명 주기

위의 그림에 기본적인 컴포넌트의 생성, 완료, 갱신, 소멸에 거치는 과정들을 그림으로 표현해놓았습니다.

 

import { Component } from 'react';
 
class LifeCycleExample extends Component {
  static getDerivedStateFromProps() {
    console.log('getDerivedStateFromProps 호출');
    return {};
  }
  constructor(props) {
    super(props);
    this.state = {};
    console.log('constructor 호출');
  }
  componentDidMount() {
    console.log('componentDidMount 호출');
  }
  componentDidUpdate() {
    console.log('componentDidUpdate 호출');
  }
  componentWillUnmount() {
    console.log('componentWillUnMount 호출');
  }
  getSnapshotBeforeUpdate() {
    console.log('getSnapshotBeforeUpdate 호출');
  }
  shouldComponentUpdate() {
    console.log('shouldComponentUpdate 호출');
  }
  render() {
    console.log('render 호출');
    return null;
  }
}
 
export default LifeCycleExample;
 

 

위의 그림에서 볼 수 있는 컴포넌트 주기를 눈으로 보기 위해 각 컴포넌트들을 만들어서 콘솔창에 띄워주었습니다.

 

결과 화면

 

State 갱신 버튼을 누르면 처음부터 다시 시작하는 것이 아니라 getDerivedStateFromProps부터 시작되는 것을 볼 수 있습니다.