모든 리액트 컴포넌트에는 라이스사이클(수명주기)이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다.

참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다.

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

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

라이프사이클은 총 세가지, 즉 마운트, 업데이트, 언마운트 카테고리로 나눕니다.

마운트

DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 합니다.
1)constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드입니다.
2)getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드입니다.
3)render: 우리가 준비한 UI를 렌더링하는 메서드입니다.
4)componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드입니다.

업데이트

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

언마운트

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

라이프사이클 메서드 사용하기

LifeCycleSample.js

import React, { Component } from "react";

class LifeCycleSample extends Component {
  state = {
    number: 0,
    color: null,
  };

  myRef = null; //ref를 설정할 부분

  //컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행됩니다.
  constructor(props) {
    super(props);
    console.log("constructor");
  }

  //props로 받아 온 값을 state에 동기화시키는 용도,
  //컴포넌트가 마운드될 때와 업데이트될 때 호출됩니다.
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log(`getDerivedStateFromProps`);
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
  }

  //컴포넌트를 만들고, 첫 렌더링을 다 만친 후 실행합니다.
  componentDidMount() {
    console.log("componentDidMount");
  }

  //props 또는 state를 변경했을 때, 리렌더링을 시작할지 여부를 지정하는 메서드 입니다.
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate", nextProps, nextState);
    //숫자의 마지막 자리가 4면 리렌더링하지 않습니다.
    return nextState.number % 10 !== 4;
  }

  //컴포넌트를 DOM에서 제거할 때 실행합니다.
  componentWillUnmount() {
    console.log("componentWillMount");
  }

  handleClick = () => {
    this.setState({
      number: this.state.number + 1,
    });
  };

  //render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출됩니다.
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    if (prevProps.color !== this.props.color) {
      return this.myRef.style.color;
    }
    return null;
  }

  //리렌더링을 완료한 후 실행합니다.
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate", prevProps, prevState);
    if (snapshot) {
      console.log("업데이트되기 직전 색상 : ", snapshot);
    }
  }

  render() {
    console.log("render");
    const style = {
      color: this.props.color,
    };
    return (
      <div>
        <h1 style={style} ref={(ref) => (this.myRef = ref)}>
          {this.state.number}
        </h1>
        <p>color: {this.state.color}</p>
        <button onClick={this.handleClick}>더하기</button>
      </div>
    );
  }
}

export default LifeCycleSample;

App.js

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

//랜덤 색상을 생성합니다.
function getRandomColor() {
  return "#" + Math.floor(Math.random() * 16777215).toString(16);
}

class App extends Component {
  state = {
    color: "#000000",
  };

  handleClick = () => {
    this.setState({
      color: getRandomColor(),
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>랜덤 색상</button>
        <LifeCycleSample color={this.state.color} />
      </div>
    );
  }
}

export default App;