7.3.1 예제 컴포넌트 생성

src 디렉터리에 LifeCycleSample.js라는 컴포넌트를 만드세요.

LifeCycleSample.js

import React, { Component } from 'react';
 
class LifeCycleSample extends Component {
  state = {
    number: 0,
    color: null,
  }
 
  myRef = null; // ref를 설정할 부분

  constructor(props) {
    super(props);
    console.log('constructor');
  }
 
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log('getDerivedStateFromProps'); 
    if(nextProps.color != = prevState.color) {
      return { color: nextProps.color };
    }
    return null;
  }
 
  componentDidMount() {
    console.log('componentDidMount');
  }
 
  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate', nextProps, nextState);
    // 숫자의 마지막 자리가 4면 리렌더링하지 않습니다.
    return nextState.number % 10 != = 4;
  }
 
  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  handleClick = () => {
    this.setState({
      number: this.state.number + 1
    });
  }
 
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate');
    if(prevProps.color != = this.props.color) {
      return this.myRef.style.color;
    }
    return null;
  }
 
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate', prevProps, prevState);
    if(snapshot) {
      console.log('업데이트되기 직전 색상: ', snapshot);
    }
  }
 
  render() {
    console.log('render');

    const style = {
      color: this.props.color
    };
 
    return (
      <div>
        <h1 style={style} ref={ref => this.myRef=ref}>
          {this.state.number}
        </h1>
        <p>color: {this.state.color}</p>
        <button onClick={this.handleClick}>
          더하기
        </button>
      </div>
    )
  }
}
 
export default LifeCycleSample;

---