#3.2. Component Life Cycle

이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 
다소 불친절한 설명이 있을 수 있음을 미리 알립니다.

# Mounting

---

• Component가 mounting될 때

  1. constructor() 실행

  2. static getDerivedStateFromProps() 실행

  3. componentDidMount() 실행

     class App extends React.Component {
     constructor(props) {
      super(props);
      console.log("hello");
     }
     state = {
      count: 0,
     };
     componentDidMount() {
      console.log("component rendered");
     }
     
     render() {
      console.log("I am render");
      }
     }

결과

# Updating

---

• Component가 Updating될 때
  1. static getDerivedStateFromProps() 실행
  2. shouldComponentUpdate() 실행
  3. render() 실행
  4. getSnapshotBeforeUpdate() 실행
  5. componentDidUpdate() 실행

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log("hello");
  }
  state = {
    count: 0,
  };
  componentDidMount() {
    console.log("component rendered");
  }
//### componentDidUpdate ### //
  componentDidUpdate() {
    console.log("I just updated.");
  }
  render() {
    console.log("I am render");
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
  add = () => {
    this.setState((current) => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState((current) => ({ count: current.count - 1 }));
  };
}

export default App;

add 또는 minus 를 클릭하면,

# Unmounting

---

• Component가 Unmounting될 때
  1. componentWillUnmount() 실행