LifeCycle AIP <출처: velopert님>

1. 컴포넌트 초기 생성(Mounting)

• 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API들이 있습니다.
  

2. Constructor

• 생성자 함수를 의미한다. 컴포넌트가 새로 만들어질 때마다 이 함수가 호출된다.
  super()함수와 같이 사용한다.

  constructor(props) {
         super(props);

3. componentWillMount

• 이 API는 컴포넌트가 화면에 나타나기 직전에 호출되는 API 입니다. 원래는 주로 브라우저가 아닌 환경에서 (서버사이드)도 호출하는 용도로 사용했었는데, 이제 더이상 사용하지 않는다.

4. componentDidMount

• 이 API는 컴포넌트가 화면에 나타났을 때 호출 됩니다. 여기서 주로 D3, masonry 처럼 DOM 을 사용해야 하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch 등을 통하며 ajax 요청을 하거나, DOM 의 속성을 읽거나 직접 변경하는 작업을 진행합니다.

5. 컴포넌트 업데이트(Updationg)

• 컴포넌트 업데이트는 props 의 변화, 그리고 state 의 변화에 따라 결정됩니다. 업데이트가 되기 전과 그리고 된 후에 API가 호출 된다.

6. componentWillReceiveProps

• 이 API는 컴포넌트가 새로운 props 를 받게됐을 때 호출됩니다.

7. static getDerivedStateFromProps()

• 이 API는 props 로 받아온 값을 state 로 동기화 하는 작업을 해줘야 하는 경우에 사용됩니다.

  static getDerivedStateFromProps(nextProps, prevState) { }

8. shouldComponentUpdate

• 컴포넌트를 최적화하는 작업에서 매우 유용하게 사용되는 API 입니다. 리액트에서는 변화가 발생하는 부분만 업데이트를 해줘서 성능이 잘 나올 수 있습니다. 하지만, 변화가 발생한 부분만 감지해내기 위해서는 Virtual DOM에 한번 그려줘야 합니다. 현재 컴포넌트의 상태가 업데이트되지 않아도, 부모 컴포넌트가 리렌더링되면, 자식 컴포넌트들도 렌더링 됩니다. 여기서 "렌더링" 된다는건, render()함수가 호출된다는 의미입니다.
  변화가 없으면 물론 DOM 조작은 하지 않게 됩니다. Virtual DOM 에만 렌더링 할 뿐입니다. 이 작업은 그렇게 부하가 많은 작업은 아니지만, 컴포넌트가 무수히 많이 렌더링된다면 얘기가 조금 달라집니다. CPU 자원을 어느정도 사용하고 있기 때문입니다.
  쓸대없이 낭비되고 있는 이 CPU 처리량을 줄여주기 위해서 우리는 Virtual DOM 에 리렌더링 하는것도, 불필요할 경우를 방지하기 위해서 shouldComponentUpdate 를 사용합니다.
  이 함수는 기본적으로 true 를 반환합니다. 우리가 따로 작성을 해주어서 조건에 따라 false 를 반환하면 해당 조건에는 render 함수를 호출하지 않습니다.

9. getSnapshotBeforeUpdate()

• 이 API를 통해서, DOM 변화가 일어나기 직전의 DOM 상태를 가져오고, 여기서 리턴하는 값은 componentDidUpdate에서 3번째 피라미터로 받아올 수 있게 됩니다.