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 메서드를 이용한 간단한 에러 처리 방식이다.