Life Cycle 변화 (v16.3)

출처 : https://medium.com/@baphemot/understanding-react-react-16-3-component-life-cycle-23129bc7a705

[ Deprecated ] componentWillMount -> UNSAFE_componentWillMount

컴포넌트가 화면에 나가기 직전에 호출

componentDidMount 로 대체

[ Deprecated ] componentWillreceiveProps -> UNSAFE_componentWillreceiveProps

컴포넌트가 새로운 props를 받게됐을때 호출

새로 받게될 props는 nextProps로 조회 할 수 있으며, 이 때 this.props를 조회하면 업데이트 되기 전이다

getDerivedStateFromProps 로 대체

[ Deprecated ] componentWillUpdate -> UNSAFE_componentWillUpdate

shouldComponentUpdate 에서 true를 반환했을때만 호출

주로 애니메이션 효과를 초기화하거나, 이벤트 리스너를 없애는 작업 등

getSnapshotBeforeUpdate로 대체

[ New ] static getDerivedStateFromProps

props로 받아온 값을 state로 동기화 하는 작업을 해줘야 하는 경우 사용

setState를 하는 것이 아니라 특정 props가 바뀔 때 설정하고 싶은 state 값을 리턴하는 형태

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.value !== prevState.value) {
    return { value: nextProps.value };
  }
  return null; // null 을 리턴하면 따로 업데이트 할 것은 없다라는 의미
}

[ New ] getSnapshotBeforeUpdate

API 발생 시점

1. render()

2. getSnapshotBeforeUpdate()

3. 실제 DOM에 변화 발생

4. componentDidUpdate()

이 API를 통해서 DOM 변화가 일어나기 직전의 DOM 상태를 가져오고

여기서 리턴하는 값은 componentDidUpdate에서 3번째 파라미터로 받아올 수 있게 된다

shouldComponentUpdate

컴포넌트를 최적화하는 작업에서 유용하게 사용

쓸데없이 낭비되고 있는 CPU 처리량을 줄여주기 위해서 Virtual DOM에 리렌더링 하는것도 방지하기 위해 작성

기본적으로 true를 반환

따로 작성을 해주어서 조건에 따라 false를 반환하면 해당 조건에는 render()를 호출하지 않는다

componentDidMount

컴포넌트가 화면에 나타나게 됐을 때 호출

외부라이브러리 연동, Ajax 요청, DOM의 속성을 읽거나 직접 변경하는 작업 등

componentDidUpdate

컴포넌트에서 render()를 호출하고난 다음에 발생

이 시점에서는 this.props와 this.state가 바뀌어있다

getSnapshotBeforeUpdate 에서 반환한 snapshot 값은 세번째 값으로 받아온다

componentDidUpdate(prevProps, prevState, snapshot) {

}

componentWillUnmount

컴포넌트가 더 이상 필요하지 않게 되면 호출

주로 이벤트, setTimeout, 외부 라이브러리 인스턴스 제거를 한다

componentDidCatch

render() 에서 에러가 발생하면 호출

class Counter extends Component {
  state = {
    number: 0,
    error: false
  }

  componentDidCatch(error, info) {
    this.setState({
      error: true
    });
  }
  
  render() {
    if (this.state.error) return (<h1>에러발생!</h1>);

    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        { this.state.number === 4 && <Promblematic /> }
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

출처 : velopert.com