React 오류 경계(Error Boundaries) 개념과 사용 방법

오류 경계(Error Boundaries)

어플리케이션에서는 가끔은 예방할 수 없는 오류도 있으며 어떤 오류는 어플리케이션의 어떤 부분에서 다른 부분으로 무언가가 잘못되었다는 것을전달할 때 사용되기도 한다.

HTTP 요청 전달을 예로 들면 서버가 일시적으로 응답이 없을 경우에는 이 요청에 대해 응답할 수 없으며 따라서 어플리케이션에서는 오류가 발생된 것을 보게 될 것이다.

이와 같이 개발자가 막을 수 없는 오류는 분명 존재한다.

이럴 때 try-catch문을 사용하는데 try를 통해 실패할 수 있는 코드를 쓰고

잠재적으로 발생할 수 있는 오류를 감지해서 오류 처리를 할 수 있는 대체 코드를 실행한다.

componentDidUpdate() {
     try {
       someCodeWhichMightFail()
     } catch (err) {
       // handle error
     }
    if (this.props.users.length === 0) {
      throw new Error("No users provided!");
    }
  }

만약 컴포넌트 안에서 오류가 발생하고 이를 처리할 수 없는 상황이라고 가정하고 오류를 부모 컴포넌트에서 처리하고 싶다면 try-catch 문은 사용할 수 없다.

이 문장은 정규 자바스크립트 문장을 사용하는 곳에서만 쓸 수 있는데 오류를 처리해야하는 부모 컴포넌트는 jsx 코드를 사용하고 이 jsx 코드 안에서 오류가 발생한 것이이때문이다.

따라서 이 jsx 코드 안에서는 try-catch 문으로 오류 처리를 할 수 없기 때문에

이 방법은 사용할 수 없다.

대신에, 이럴 때는 오류 경계라는 것을 만들어서 처리할 수 있다.

새로운 컴포넌트 클래스 컴포넌트를 만들고 이 곳에서 componentDidCatch() 를 사용한다.

componentDidCatch() 생명 주기 메소드를 활용하는 컴포넌트입니다

componentDidCatch() 메소드는 어느 클래스 컴포넌트에도 추가할 수 있으며

컴포넌트에 이를 추가하게 되면 클래스 컴포넌트를 오류 경계로 만들게 된다.

이 오류 경계란 단어는 이런 생명 주기 메소드를 갖는 컴포넌트를 지칭하는 용어이다.

이 생명 주기 메소드는 하위 컴포넌트 중 하나가 오류를 만들거나 전달할 때 발동한다.

오류가 발생했을 때의 조치를 위해서 error객체를 매개변수로 가져온다.

오류를 확인해서 무엇이 문제인지 확인하고 개별 오류마다 서로 다른 로직을 실행하게 할 수 있다.

오류 경계에서도 다른 컴포넌트에서 그러했듯이 render() 메소드를 추가한다.

import {Component} from 'react';

class ErrorBoundary extends Component {
    constructor() {
        super();
        this.state = {hasError : false};
    }

    componentDidCatch(error) {
        console.log(error);
        this.setState({hasError : true})
    }

    render() {
        if(this.state.hasError) {
            return <p>Something went wrong!</p>
        }
        return this.props.children;
    }
}

export default ErrorBoundary;

그리고 this.props.children을 반환하는데 이 오류 경계 컴포넌트를 보호하려고 하는 컴포넌트에 둘러싸야하기 때문이다.

<ErrorBoundary>
  <Users/>
</ErrorBoundary>

이 오류 경계를 사용하는 이유는 무언가가 잘못되더라도 어플리케이션의 작동이 중지되지 않고 try-catch문과 같이 좀 더 세련된 방식으로 처리할 수 있기 때문이다.

이 오류 경계를 추가하려면 클래스 컴포넌트를 사용해야하며 함수형 컴포넌트에서는 아직 사용이 불가능하다.