Component 의 LifeCycle 예제

책보고 예제를 만들어보긴했는데 아직 완벽하게 숙지되지는 않는다.

console 창을 켜놓고 계속 클릭 + 소스 분석을 더 해봐야 숙지할수있을것 같다.

 

App.js

import React, { Component } from "react";
import LifeCycleSample from "./LifeCycleSample";
 
// 랜덤 색상을 생성합니다.
function getRandomColor() {
  return "#" + Math.floor(Math.random() * 16777215).toString(16);
}
class App extends Component {
  state = {
    color: "#000000",
  };
 
  handleClick = () => {
    this.setState({
      color: getRandomColor(),
    });
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>랜덤 색상</button>
        <LifeCycleSample color={this.state.color} />
      </div>
    );
  }
}
 
export default App;

LifeCycleSample.js

import React, { Component, Componet } from "react";
 
class LifeCycleSample extends Component {
  state = {
    number: 0,
    color: null,
  };
 
  myRef = null;
 
  constructor(props) {
    super(props);
    console.log("constructor");
  }
 
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
  }
 
  componentDidMount() {
    console.log("componentDidMount");
  }
 
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponent", 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;
 

 

shouldComponentUpdate() 매서드에 대한 이해가 부족한것같다.

책에서도 shouldComponentUpdate() 를 사용하는법을 더 다룬다고 하니 이해가 되면 관련 포스팅을 추가하겠다.