에러 처리

render 함수에 존재하지 않는 함수를 사용하거나 존재하지 않는 객체의 값을 조회하려고 하면 에러가 발생한다.
에러 처리를 할 때는 라이프사이클 메서드 중 하나인 componentDidCatch 메서드를 이용한다.

에러가 발생하고나면 어디에서 에러가 발생했는지 알 수 있는 정보가 나타난다.

개발 서버를 실행 중이기 때문에 해당 정보가 나타난다.

실제 웹 서비스를 이용하는 사용자에게 에러 화면은 흰 화면만 나타나게 된다.
사용자에게 에러가 발생했다고 인지시켜 주어야 한다.

에러 컴포넌트

ErrorBoundary.js

import React, { Component } from "react";

class ErrorBoundary extends Component {
  state = {
    error: false,
  };

  componentDidCatch(error, info) {
    this.setState({
      error: true,
    });
    console.log({ error, info });
  }
  render() {
    if (this.state.error) return <div>에러가 발생했습니다.</div>;
    return this.props.children;
  }
}

export default ErrorBoundary;

App.js

<ErrorBoundary>
  <LifeCycleSample color={this.state.color} />
</ErrorBoundary>

에러가 발생하면 ErrorBoundary의 componentDidCatch 메서드가 호출된다.
this.state.error 값을 true로 업데이트 해준다.
componentDidCatch 메서드를 이용한 간단한 에러 처리 방식이다.