에러가 발생할 때

import React from 'react';

function User({ user }) {
  return (
    <div>
      <div>
        <b>ID</b>: {user.id}
      </div>
      <div>
        <b>Username:</b> {user.username}
      </div>
    </div>
  );
}

export default User;

위 컴포넌트는 user라는 props값을 받아와서 id와 username 값을 보여주는 컴포넌트입니다.

import React from 'react';
import User from './User';

function App() {
  const user = {
    id: 1,
    username: 'abc'
  };
  return <User user={user} />;
}

export default App;

App.js에서 사용을 해봤을 때 결과값은...

ID : 1 , Username : abc 가 됩니다.

하지만 여기서 props 값을 제대로 설정하지 않았다면?

위처럼 에러가 뜨게 됩니다. 그러나 위 화면은 개발환경에서만 보여지는 에러 화면이기 때문에 오른쪽 X를 누르면 빈 화면이 출력됩니다.

빈 화면이 출력되면 사용자는 혼란을 겪을 수 있기 때문에 이러한 현상을 방지하기 위하여
componentDidCatch 함수를 이용해서 에러가 나게되면 빈 화면이 아닌 "에러가 발생하였습니다" 라는 글씨나 다른 요소들을 출력할 수 있습니다.

에러 메시지 출력

import React, { Component } from 'react';

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

  componentDidCatch(error, info) {
    console.log('에러가 발생했습니다.');
    console.log({
      error,
      info
    });
    this.setState({
      error: true
    });
  }

  render() {
    if (this.state.error) {
      return <h1>에러가 발생했습니다.</h1>;
    }
    return this.props.children;
  }
}

componentDidCatch 메서드에서는 두개의 매개변수 (error , info) 를 사용합니다. error는 에러의 내용을 알려주고, info는 에러가 발생한 위치를 알려줍니다.

import React from 'react';
import ErrorBoundary from './02/ErrorBoundary';
import User from './02/User';

function App() {
  const user = {
    id: 1,
    username: 'abc'
  };
  return(
    <ErrorBoundary>
      <User></User>
    </ErrorBoundary>
  );
}

export default App;

App.js에서 EroorBoundary , User 컴포넌트를 선언 해줍니다.

결과

결과를 보게되면 에러 화면이 뜨겠지만, 오른쪽에 X 버튼을 누르게 되면

빈 화면이 아닌 에러가 발생하였습니다. 라는 문구가 나오게됩니다.