React Concurrent Mode는 React 18 버전에서 도입된 새로운 기능으로, 애플리케이션 성능을 향상시키기 위해 비동기적인 UI 렌더링을 지원합니다. 하지만 Concurrent Mode를 사용할 때 JavaScript 런타임 에러에 대한 처리가 중요합니다. 이번 블로그 포스트에서는 React Concurrent Mode에서 JavaScript 런타임 에러를 처리하는 방법을 알아보겠습니다.

1. Error Boundaries 사용하기

Error Boundary는 React 컴포넌트의 하위 컴포넌트에서 발생하는 에러를 캐치하고 처리할 수 있는 컴포넌트입니다. React Concurrent Mode에서도 Error Boundary 컴포넌트를 사용하여 JavaScript 런타임 에러를 처리할 수 있습니다.

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // 에러 발생 시 상태 업데이트
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 로그 등록 또는 서버로 보내기
    console.error('JavaScript 런타임 에러:', error);
  }

  render() {
    if (this.state.hasError) {
      // 에러가 발생한 경우 대체 UI 표시
      return <h1>에러가 발생했습니다.</h1>;
    }

    // 에러가 없는 경우 정상적인 컴포넌트 렌더링
    return this.props.children;
  }
}

export default MyErrorBoundary;

위의 코드는 MyErrorBoundary라는 예시 Error Boundary 컴포넌트를 보여주고 있습니다. 이 컴포넌트는 getDerivedStateFromError 메서드를 통해 에러 발생 시 상태를 업데이트하고, componentDidCatch 메서드를 통해 에러를 처리하는 로직을 구현하고 있습니다.

이제 JavaScript 런타임 에러가 발생할 수 있는 React 컴포넌트를 Error Boundary로 감싸줍니다.

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

function MyComponent() {
  throw new Error('에러 발생!');

  return (
    <div>
      {/* 컴포넌트 내용 */}
    </div>
  );
}

function App() {
  return (
    <MyErrorBoundary>
      <MyComponent />
    </MyErrorBoundary>
  );
}

export default App;

MyComponent 컴포넌트 내에서 throw new Error()를 사용하여 강제로 에러를 발생시키고 있습니다. MyComponent 컴포넌트를 MyErrorBoundary로 감싸주면, 이 에러가 MyErrorBoundary에서 캐치되어 에러 처리 로직이 실행됩니다.

2. Suspense 사용하기

React Concurrent Mode에서는 Suspense 컴포넌트를 사용하여 데이터를 로딩할 때 에러를 처리할 수도 있습니다. Suspense는 비동기적인 작업이 완료될 때까지 대체 컨텐츠를 표시하는 역할을 합니다.

import React, { Suspense } from 'react';

const DataFetchingComponent = React.lazy(() => import('./DataFetchingComponent'));

function App() {
  return (
    <Suspense fallback={<h1>데이터 로딩 중...</h1>}>
      <DataFetchingComponent />
    </Suspense>
  );
}

export default App;

위의 코드는 DataFetchingComponent라는 예시 비동기 데이터 로딩 컴포넌트를 보여주고 있습니다. Suspense 컴포넌트를 사용하여 비동기 데이터 로딩이 완료될 때까지 <h1>데이터 로딩 중...</h1>을 대체 컨텐츠로 보여주고 있습니다.

만약 데이터 로딩 중 에러가 발생한다면, Suspense 컴포넌트는 에러를 캐치하여 에러 처리 로직을 실행할 수 있습니다.

React Concurrent Mode에서 JavaScript 런타임 에러를 처리하는 방법에 대해 알아보았습니다. Error Boundary와 Suspense를 적절히 사용하여 에러를 캐치하고 처리하는 방법으로 애플리케이션의 안정성을 향상시킬 수 있습니다.

#React #ConcurrentMode