React Error Boundary가 무엇인가요?

React Error Boundary의 개념

React Error Boundary는 React 컴포넌트 트리 내에서 에러를 처리하고 관리하는 기능입니다. 일반적으로 React 컴포넌트에서 에러가 발생하면 해당 컴포넌트와 그 하위 컴포넌트들이 완전히 언마운트되고 애플리케이션이 중단됩니다. 그러나 Error Boundary를 사용하면 이러한 에러를 처리하고 애플리케이션의 다른 부분은 계속 정상적으로 작동할 수 있습니다.

Error Boundary는 에러 경계를 정의하고 해당 경계 내에서 에러를 캐치하여 대체 UI를 표시하거나 로깅하는 등의 사용자 정의 동작을 수행할 수 있습니다. 이를 통해 사용자에게 더 나은 사용자 경험을 제공하고 애플리케이션의 신뢰성을 높일 수 있습니다.

Error Boundary 예시

다음은 Error Boundary의 예시입니다:

import React, { useState } from 'react';

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);

  const handleOnError = (error, errorInfo) => {
    setHasError(true);
    console.error(error);
  };

  if (hasError) {
    return <div>에러가 발생했습니다.</div>;
  }

  return (
    <React.ErrorBoundary onError={handleOnError}>
      {children}
    </React.ErrorBoundary>
  );
}

위의 예시에서 ErrorBoundary 함수형 컴포넌트는 hasError 상태와 handleOnError 에러 핸들러 함수를 정의합니다. hasError 상태가 true일 경우 대체 UI를 렌더링하고, 그렇지 않은 경우 React.ErrorBoundary 컴포넌트를 사용하여 children을 렌더링합니다.

Error Boundary를 사용하려면 컴포넌트 트리 내에서 에러가 발생할 수 있는 부분을 Error Boundary 컴포넌트로 감싸주어야 합니다. 이를 통해 에러를 캐치하고 적절한 대응을 할 수 있습니다.

주의해야 할 점은 Error Boundary는 자식 컴포넌트에서 발생한 에러만 처리할 수 있으며, 자신이나 부모 컴포넌트에서 발생한 에러는 처리하지 못합니다. 따라서 Error Boundary를 적절히 배치하여 예상되는 에러를 처리하는 것이 중요합니다.