[React] - 9) 에러 발생 시 처리하기

velopert 님의 리액트를 다루는 기술 책으로부터 공부한 내용임을 밝힙니다 😄

에러 발생시키기

안녕하세요

오늘은 리액트에서의 에러 발생 시 화면 처리에 대해 포스팅하겠습니다.

대부분의 웹 페이지들은 특정 에러가 발생하였을 때 띄우는 창이 있습니다.

예를 들면

Github 404 error

PageNotFound 에러 발생 시에 나타나는 이런 페이지가 있겠죠?

리액트에서도 에러 발생시에 나타나는 창이 있습니다. 우선 억지로 에러를 만들어 볼까요?

ErrorFound.js를 만들고 다음과 같이 작성합니다.

import React, { Component } from 'react';

class ErrorFound extends Component {

    render() {
        return (
            <div>
                {this.props.abc.value}
            </div>
        );
    }
}

export default ErrorFound;

존재하지 않는 props인 abc의 value를 억지로 추출하려고 하면, 다음과 같은 창이 뜰 것입니다.

 

개발자 입장에서는 발생한 오류를 잘 잡아주었지만, 사용자 입장에서는 당황스럽겠죠?

 

이제 이 페이지를 바꿔보겠습니다.

 

에러가 발생하면 componentDidCatch라는 메소드가 발생합니다.

 

\

역시나 리액트의 라이프사이클과 관련이 있는 것 같죠?

 

이제 ErrorCatch.js를 만들고 다음과 같이 작성해 봅시다.

 

import React, { Component } from 'react';

class ErrorCatch 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 ErrorCatch;

 

componentDidCatch는 에러를 감지하면 state.error를 true로 만들고

 

state.error가 true일 때는 에러가 발생했다는 메시지를, 그렇지 않다면 자식을 그대로 렌더링 할 것입니다.

 

그리고, ErrorFound.js에서 다음과 같이 감싸 봅시다.

 

import React, { Component } from 'react';
import ErrorCatch from './ErrorCatch';

class ErrorFound extends Component {

    render() {
        return (
            <div>
                <ErrorCatch>
                    {this.props.abc.value}
                </ErrorCatch>
            </div>
        );
    }
}

export default ErrorFound;

 

그러면 아까와 같은 붉은 박스가 나타나지만, x 표시를 누르면 에러가 발생했다고 뜰 거에요!