React Life Cycle 시리즈(Update/Unmount 편)

Update(업데이트)

Component들은 state 나 props 가 변경이 되면 update가 진행이 되며 다시 rendering 된다. Input이 달라지니 output이 달라져야 하기 때문이다. 그리고 상위 component가 update되면 그에 속한 하위 component들도 다시 mount가 된다.

component가 update될 때 아래의 순서대로 메소드가 실행이 된다.

1. New Props / setState()
2. render()
3. componentDidUpdate()

New Props

상위 Component로부터 갱신된 props 를 받는 경우가 있다. 이 때, 갱신된 props 를 받은 Component 들은 다시 렌더링되며, update cycle을 진행하게 된다.

setState

Component들은 공통적으로 setState() api를 제공한다. 이 메소드의 경우 현재 자신이 가진 state를 변경할 수 있도록 해준다. setState() api로 state가 update cycle을 진행하게 된다.

componentDidUpdate

componentDidUpdate 는 update 가 이루어지고 render가 완료된 직후 실행되는 메소드이다. 최초 마운트 될 때는 실행되지 않는다.

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate 는 3개의 인자를 받는다.

• prevProps : 업데이트가 되기 전 prop을 인자로 받을 수 있다. 이전 props와 변경이 되었는지 안 되었는지를 확인 한 후 추가적인 액션을 설정하는 것에 유용하다.

componentDidUpdate(prevProps) {
  if (this.props.Id !== prevProps.Id) {
    fetchData(this.props.Id);
  }
}

• prevState : prevProps와 마찬가지로 업데이트가 되기 전 state 정보를 인자로 받을 수 있다. 이전 state와 비교하여 실행여부를 결정할 때 주로 사용된다.

componentDidUpdate(prevProps, prevState) {
  if (this.state.Id !== prevState.Id) {
    fetchData(this.props.Id);
  }
}

• snapshot : getSnapshotBeforeUpdate() 메소드를 구현했다면 세번째 인자로 snapshot을 받을 수 있다.

componentDidUpdate 를 이용할 때, setState를 주의해야 한다. 조건문 등으로 제어해두지 않으면 무한 루프에 빠질 수 있기 때문이다.

setState > componentDidupdate > SetSate ...

Unmount(제거)

해당하는 Component가 DOM상에서 제거가 될 때 실행되는 lifeCycle이다.

componentWillUnmount

최종적으로 제거가 되기 전 실행이 된다. component 내에서 이루어지는 네트워크 요청, 타이머 이벤트 등 지속적으로 이루어지는 이벤트들을 해제하는데 유용하게 사용된다.

예를 들면 setInterval 메소드를 실행했는데, 이를 close해주지 않으면 전역에서 계속 타이머가 돌아갈 것이다. 따라서 제거되기 전에 이러한 것들을 해제시켜주어야 한다.