React 기초 (4) : Lifecycle of Component

https://ko.reactjs.org/docs/react-component.html

React.Component – React

 

훅을 사용한 함수형 컴포넌트가 대세인 시점에서 클래스 컴포넌트에서만 적용되는 라이프 사이클을 배워야 하나 싶지만, 무슨 내용인지는 알아야 합니다.

 

 

Component는 다음과 같은 생성 주기를 가진다.

mounting(생성) -> updating(변화) -> unmounting(제거)

 

각 단계별로 자주 활용되는 함수를 실행 순서대로 적어보자면 다음과 같다.

 

Mounting : constructor(), render(), componentDidMount()

Updating : shouldComponentUpdate(), render(), componentDidUpdate()

Unmounting : componentWillUnmount()

 

Updating이란 props나 state가 바뀌는 경우를 말한다(An update can be caused by changes to props or state.)

조금 더 자세하게 들어가자면 컴포넌트가 업데이트 되는 이유는

1️⃣ props가 바뀔 때,

2️⃣자신의 state가 setState로 바뀔 때,

3️⃣ 부모 컴포넌트에 의해 리렌더링 될 때 입니다. 부모컴포넌트가 리렌더링되면 자식컴포넌트들도 자동으로 리렌더링되죠.

 

 

우리가 주로 썼던 render가 여기 있는 것이 보이는가?

 

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log("Hello from constructor");
  }
  componentDidUpdate() {
    console.log("Hello from comonentDidUdate");
  }

  state = {
    count: 0
  };
  plus = () => {
    this.setState(current => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };
  render() {
    console.log("Hello from render");
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.plus}>Plus</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

 

실행해보면 처음 실행시

Hello from constructor

Hello from render

 

버튼을 눌러 update했을 때(state를 변경했을 때)는

Hello from render

Hello from comonentDidUdate

 

가 콘솔창에 나오는 것을 확인할 수 있다.

 

 

조금 더 자세하게 들어가보자. react v16에서 새로 추가된 내용을 볼드처리해보았다.

 

Mounting : constructor(), getDerivedStateFromProps(), render(), componentDidMount()

Updating : getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforUpdate(), componentDidUpdate()

Unmounting : componentWillUnmount()

 

 

getDerivedStateFromProps() : 부모 컴포넌트로 부터 받아온 props에 있는 값을 자신의 state에 넣을 때. 

 

처리되는 메서드를 보시면 preprops와 nextprops를 비교해서 다르면 nextprops를 넘겨줍니다.

static getDrivedSTateFromProps(nextProps.value, prevState.value) {
  inf (nextProps.value !== prevState.value) {
    return {value: nextProps.value}
  }
  return null
}

 

 

getSnapshotBeforUpdate() :

 

컴포넌트 변화를 DOM에 반영하기 직전에 호출함. 따라서 업데이트 직전의 값을 참고할 때 활용됨

 

---

 

 

React v16.4의 라이프사이클은 다음과 같습니다.