React | 렌더링 주기 - 업데이트 단계 (Updating)

---

• static getDerivedStateFromProps()
  • props로부터 상태를 동기화 하고자 할 때 호출하는 메서드
  • 마운트 이후에도 props로부터 상태를 업데이트 할 필요가 있을 때 호출한다.
• shouldComponentUpdate()
  • 생명주기 메서드 중 하나
  • 컴포넌트 업데이트(렌더링) 여부를 결정한다.
• render()
  • 컴포넌트 UI 렌더링을 수행한다.
• getSnapshotBeforeUpdate()
  • 생명주기 메서드 중 하나
  • 최근에 렌더링 된 결과가 DOM에 반영되기 직전에 호출되는 메서드 이다.
• componentDidUpdate()
  • 생명주기 메서드 중 하나
  • 업데이트가 완료된 이후에 호출되는 메서드 이다.

---

import React, { Component } from 'React'

class MyComponent extends Component {
    constructor(props) {
        super(props);
     	// 초기 상태 설정
        this.state = { 
            count : 0,
        };
    }
    
    shouldComponentUpdate(nextProps, nextState) {
      // 컴포넌트 업데이트 여부를 boolean 타입으로 넘겨준다.
      return nextState.count !== this.state.count;
    }
    
    render() {
        return (
            <div>
            	<p>{this.state.count}</p>
            </div>
        );
    }
    
    getSnapshotBeforeUpdate(prevProps, prevState) {
      if (prevState.count < this.state.count) {
        return 'count-increased';
      }
      // 반환된 값은 componentDidUpdate에서 사용할 수 있음
      return null;
    }
    
    componentDidUpdate(prevProps, prevState, snapshot) {
      if (snapshot === 'count-increased') {
        console.log('Count was increased!');
      }
    }
}

export default MyComponent;