react component의 메서드

react class component는 render가 아닌 다른 메서드도 가지고 있다.

이름하여 life cycle method 이다.

 

react가 component를 생성하거나 없애는 방법이다.

 

 

component가 생성될 때

 

render 전에 호출되는 몇 가지 기능이 있다.

 

render 후에 호출되는 기능도 있다.

 

 

*mouting

 1. constructor(): js에서 온 것. class를 만들 때 호출되는 것이다.

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log("constructor");
  }
  state = {
    count: 0
  };
  add = () => {
    this.setState(current => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };

  render() {
    console.log("render");
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

결과: constructor / render

 

constructor은 시작 전에 출력되었고, 그 후에 render 되었다.

 

2. componentDidMount() :

이 컴포넌트는 처음 렌더됐어. 라고 알려주는 메서드

 

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log("constructor");
  }
  state = {
    count: 0
  };
  add = () => {
    this.setState(current => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };
  componentDidMount() {
    console.log("Component did mount rendered");
  }

  render() {
    console.log("render");
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

결과:

 

 

*updating

1. componentDidUpdate()

업데이트의 발생 원인은 자신이다. 내가 무언가를 event 시켰을 때 update가 되기 때문이다.

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log("constructor");
  }
  state = {
    count: 0
  };
  add = () => {
    this.setState(current => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };
  componentDidMount() {
    console.log("Component did mount rendered");
  }
  componentDidUpdate() {
    console.log("I just updated");
  }

  render() {
    console.log("render");
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

결과: 

 

 

 

*unmounting

1. componentWillUnmount()

: 컴포넌트를 없애거나, 페이지를 옮겼거나... 컴포넌트가 없어질 때 출력된다.

import React from "react";

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

export default App;