Component Life Cycle

react class component는 단순히 render말고도 더 많은 걸 가지고 있다.

좋아, 이들은 life cycle method를 가지는데, life cycle method는 기본적으로 react가 componenet를 생성하는 그리고 없애는 방법이다. 

 

component가 생성될 때, render 전에 호출되는 몇 가지 function이 있다. 또한 component가 render된 후 호출되는 다른 function들이 존재한다. 그리고 component가 update될 때, 호출되는 다른 function이 있다. 

 

 

Mouting은 태어나는 것과 같다. constructor은 react에서 나온 것은 아니고, 자바스크립트에서 class를 만들 때 호출되는 것이다. constructor은 시작 전에 호출되고 그 후 render가 호출되는 식이다. 

우선, 따라서 component가 mount될 때, component가 screen에 표시될 때, component가 우리의 Website에 갈 때, constructor을 호출한다.

 

다음은 getDerivedSateFromProps이다. 이건 거의 쓰지 않기때문에 다루지 않겠다. 

 

다음은 render인데, 이는 필수불가결한 메서드이기에, 우린 다 알고있을것이라 생각한다. 따라서 다루지 않겠다.

 

마지막으로는 componentDidMount이다. 기본적으로 이 함수는 우리들에게 "이 component가 처음 render됐어"라고 알려주능 기능을 한다. 그렇다면 실제로 render를 해보자. 다음 예시를 보며 더 자세하게 알아보자.

import React from 'react';

class App extends React.Component {
  state = {
    count: 0,
  };
  add = () => {
  	this.setState(current => ({ count: current.count + 1}));
 };
 minus = () => {
  	this.setState(current => ({ count: current.count - 1}));
 };
  componentDidMount() {
  	console.log("component rendered");
  }
  render() {
  console.log("I'm rendering");
    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;

 위 코드를 App에서 실행하고 콘솔창을 보면, 처음에 "I'm rendering" 그리고 그 후에 "component rendered"가 출력된 것을 볼 수 있다. 이를 통해 componentDidMount에 대한 위 설명이 더욱 이해가 잘 될 것이다. 

 

또 다른 하나는 Updating인데, 일반적인 업데이트를 의미한다. 여기서 업데이트의 원인은 바로 우리다. 우리가 위의 예제 코드에서 만약 ADD 혹은 Minus를 클릭해서 state를 변경할 때, 그게 업데이트다. 즉, 우리가 만든 업데이트다. component가 업데이트 될 때, 호출되는 많은 function이 있는데, 그 중 하나는 getDerivedStateFromProps인데, 그건 여기서 다루지 않겠다. shouldComponentUpdate는 기본적으로 업데이트를 할 지 말지에 대해서 결정하는 것에 대한 것이다. 이것은 setState를 호출할 때마다 발생한다. 

getSnapshotBeforeUpdate는 사실상 거의 사용할 일이 없기 때문에 다루지 않겠다. 

componentDidUpdate는 다음 예제 코드를 보며 바로 이해해보자.

 

import React from 'react';

class App extends React.Component {
  state = {
    count: 0,
  };
  add = () => {
    this.setState((current) => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState((current) => ({ count: current.count - 1 }));
  };
  componentDidMount() {
    console.log('component rendered');
  }
  componentDidUpdate() {
    console.log('I just updated!');
  }
  render() {
    console.log("I'm rendering");
    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;

우리가 Add 혹은 Minus를 클릭해서 state를 변경할 때, 콘솔 창에 I'm rendering이 먼저 뜨고 그 뒤에 바로 I just updated!가 뜨는 것을 볼 수 있다. Add 혹은 Minus를 클릭해서 state가 변경될 때마다 매번 위와 동일하게 콘솔창에서 반복적으로 나타나는 것을 확인할 수 있다. 

 

따라서 setState를 호출하면, component를 호출하고, 먼저 render를 호출한 다음 업데이트가 완료되었다고 말하면 componentDidUpdate가 실행되는 것이다. 

 

 

 

그리고 Unmounting, Unmounting은 component가 죽는걸 의미한다.

component가 죽는 방법은 다른 페이지로 갈 때나 state를 사용해서 component를 교체하는 방법 등 component가 죽는 데에는 다양한 방법이 있다.  

우린 component가 죽을 때, componentWillUnmount를 호출할 수 있다. 즉, componentWillUnmount는 component가 떠날 때 호출 된다.