클래스 컴포넌트의 생명주기

Front-end React

생명주기(Lifecycle)란?

컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나 업데이트 되고, 사라지게 될 때 호출되는 메소드이다.

클래스 컴포넌트 생명주기

componentDidMount()

컴포넌트가 렌더되고 나서 바로 실행된다.

componentDidUpdate()

컴포넌트가 업데이트 되고(i.e. state 업데이트) 수정되어 리렌더될 때 실행된다.

componentWillUnmount()

컴포넌트가 사라질 때 실행된다.

예제

import {Component} from "react";
import Router from "next/router";

export default class ClassCounterPage extends Component {
  state = {
    count: 0,
  };
  
  // 화면이 다 그려지고 나서 실행.
  componentDidMount() {
    console.log("componentDidMount : 그려지고 나서 실행");
  }
  
  // state 업데이트 되고 수정되어 리렌더될 때 실행
  componentDidUpdate() {
    console.log("componentDidUpdate : 변경되고 나서 실행");
  }
  
  // 컴포넌트가 사라질 때 실행하고 끔
  componentWillUnmount() {
    console.log("componentWillUnmount : 사라질 때 실행");
  }
  
  handleClickIncrement = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };
  
  handleClickMovePage() {
    Router.push("/");
  }
  
  render() {
    return (
      <>
        <div>현재 카운터 : {this.state.count}</div>
        <button onClick={this.handleClickIncrement}>Increment</button>
        <button onClick={this.handleClickMovePage}>Exit to main page</button>
      </>
    );
  }
}
  1. 해당 페이지에 들어가게 되면 
    componentDidMount : 그려지고 나서 실행
  2. Increment 버튼을 클릭하면 
    componentDidUpdate : 변경되고 나서 실행
  3. Exit 버튼을 클릭하면 
    componentWillUnmount : 사라질 때 실행

    의 콘솔 로그 메세지가 찍힌다.