라이프사이클 메서드 사용

//App.js
import logo from './logo.svg';
import './App.css';
import React, {Component} from 'react';
import LifeCycle from "./life_cycle";
import ErrorBoundary from "./error_boundary";
 
//랜덤 색생 생성
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}>Random color</button>
          <ErrorBoundary>
            <LifeCycle color={this.state.color}/>
          </ErrorBoundary>
        </div>
    )
  }
}
 
export default App;
 
 
//LifeCycle.js
import React, {Component} from 'react';
 
class LifeCycle 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);
        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('Previous color: ', snapshot);
        }
    }
 
    render() {
        console.log('render');
        const style = {
            color: this.props.color,
        }
        return (
            <div>
                {this.props.missing.value}
                <h1 style={style} ref={ref => this.myRef=ref}>
                    {this.state.number}
                </h1>
                <p>color: {this.state.color}</p>
                <button onClick={this.handleClick}>
                    add
                </button>
            </div>
        )
    }
}
 
export default LifeCycle;

결과:

에러 처리

  위 코드에서 존재하지 않는 props를 하나 추가해 에러를 내보자.

import React, {Component} from 'react';
 
class LifeCycle extends Component {
    //.......
    render() {
       //....
        return (
            <div>
                {this.props.missing.value}
                //......
            </div>
        )
    }
}
 
export default LifeCycle;

이러면 TypeError: Cannot read property 'value' of undefined라는 에러창이 뜬다. 이는 개발 서버이기 때문이고 배포를 한다면 휜페이지만 보일것이다. 따라서 에러를 잡아주는 컴포넌트가 필요하다.

 

//ErrorBoundary.js
import React, {Component} from 'react';
 
class ErrorBoundary extends Component {
    state = {
        error: false
    };
    componentDidCatch(error, errorInfo) {
        this.setState({
            error: true
        });
        console.log({error, info});
    }
    render() {
        if(this.state.eror) return <div>Error occurred</div>
        return this.props.children;
    }
}
 
export default ErrorBoundary;
 
//App.js
//...
import ErrorBoundary from "./error_boundary";
class App extends Component {
  //...
  
  render() {
    return (
        <div>
          <button onClick={this.handleClick}>Random color</button>
          <ErrorBoundary>
            <LifeCycle color={this.state.color}/>
          </ErrorBoundary>
        </div>
    )
  }
}

위와 같이 에러 처리를 해주면 휜 화면 대신 다음과 같은 결과가 나온다