LifeCycle(라이프사이클)

• 모든 리액트 컴포넌트에는 라이플사이클(수명주기)가 존재한다.
• 컴포넌트의 수명은 페이지가 렌더링되기 전인 준비과정 ~ 페이지가 사라질 때 끝난다.
• 라이플사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. (함수형 컴포넌트에서는 사용할 수 없다.)
  👩‍💻 참고) 함수형 컴포넌트에서 사용하려면 useEffect Hook을 사용하면 된다.

1. 라이프사이클 메서드의 이해

• 라이플 사이클 메서드의 종류는 총 9가지이다.
  Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드
  Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드
  

① 마운트(mount)

DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트(mount)라고 한다.

• constructor : 컴포넌트를 새로 만들 때 마다 호출되는 클래스 생성자 메서드
• gitDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드
• render : 우리가 준비한 UI를 렌더링하는 매서드
• componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출되는 메서드

② 업데이트(update)

컴포넌트는 총 4가지 경우 업데이트 한다.
1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링될 때
4. this.forceUpdate가 강제로 렌더링을 트리거할 때

• getDerivedStateFromProps: 마운트 과정에서도 호출되며, 업데이트가 시작하기 전에 호출된다.
  props의 변화에 따라 state값에도 변화를 주고 싶을 때 사용
• shouldComponentUpdate : 컴포넌트가 리렌더링을 할지 말지를 결정하는 메서드, true 또는 false를 반환한다.
  true : 다음 라이프사이클 메서드를 계속 실행
  false : 작업을 중지한다.
• render : 컴포넌트를 리렌더링 한다.
• getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
• componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

③ 언마운트(unmount)

마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 한다.

• componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출되는 메서드

2. 라이프사이클 메서드 사용

import React, { Component } from 'react';
import LifeCycleSample from './LifeCycleSample';

class App extends Component {
  // 가장 유용한 Hook 2개
  componentDidMount(){
    // App 컴포넌트가 mount 되고나서 실행할 코드
  }
  componentWillMount(){
    // App 컴포넌트가 unmount 되기전에 실행할 코드
  }
}

• componentDidMount(){} : 리렌더링을 완료한 후 실행한다.
• componentWillMount(){} : 컴포넌트를 DOM에서 제거할 때 실행한다. componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기서 제거 작업을 해야 한다.