React Life Cycle

lifecycle1


lifecycle2

Mount

  1. constructor : 컴포넌트의 생성자 메서드, 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드

      constructor(props) {
        super(props);
        console.log("constructor");
      }
  2. getDerivedStateFromProps: props를 state에 넣고 싶을때 사용

      static getDerivedStateFromProps(nextProps, prevState) {
        console.log("getDerivedStateFromProps");
        if (nextProps.color !== prevState.color) {
          return { color: nextProps.color };
        }
        return null;
      }
    • 앞에 static 필요
    • 안에서 this 조회 할 수 X
    • 특정 객체를 반환 ⇒ state 설정 O, null 반환 ⇒ state 설정 X
  3. render : 컴포넌트 렌더링

  4. componentDidMount : 컴포넌트 첫번째 렌더링 후 호출 메서드

  • 컴포넌트 화면에 나타난 상태
  • DOM 속성 읽거나 변경하는 작업, DOM 사용 외부 라이브러리 연동, axios, fetchajax 요청 등

Update

  1. getDerivedStateFromProps

  2. shouldComponentUpdate : 컴포넌트 리렌더링 결정 메서드, 최적화 할 때 사용 메서드

      shouldComponentUpdate(nextProps, nextState) {
        console.log("shouldComponentUpdate", nextProps, nextState);
        // 숫자의 마지막 자리가 4면 리렌더링하지 않습니다
        return nextState.number % 10 !== 4;
      }
    
  3. render

  4. getSnapshotBeforeUpdate : 컴포넌트 변화 일어나기 전의 DOM 상태 가져와 특정 값 반환

      getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("getSnapshotBeforeUpdate");
        if (prevProps.color !== this.props.color) {
          return this.myRef.style.color;
        }
        return null;
      }
  5. componentDidUpdate : 리렌더링 후 호출 메서드

      componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("componentDidUpdate", prevProps, prevState);
        if (snapshot) {
          console.log("업데이트 되기 직전 색상: ", snapshot);
        }
      }
    • 3번째 파라미터로 getSnapshotBeforeUpdate에서 반환한 값 조회 할 수 있다

Unmount

  1. componentWillUnmount : 컴포넌트가 화면에 사라지기 직전 호출

      componentWillUnmount() {
        console.log("componentWillUnmount");
      }