React 동시성 모드 오류 처리: 복원력 있는 사용자 인터페이스 구축하기

React의 동시성 모드는 반응성 있고 상호작용적인 사용자 인터페이스를 만드는 새로운 가능성을 열어줍니다. 그러나 큰 힘에는 큰 책임이 따릅니다. 동시성 모드의 초석인 비동기 작업 및 데이터 페칭은 사용자 경험을 방해할 수 있는 잠재적인 실패 지점을 만듭니다. 이 글에서는 React의 동시성 환경 내에서 견고한 오류 처리 전략을 깊이 파고들어, 예기치 않은 문제에 직면했을 때에도 애플리케이션이 복원력을 유지하고 사용자 친화적으로 작동하도록 보장합니다.

동시성 모드와 오류 처리에 미치는 영향 이해하기

전통적인 React 애플리케이션은 동기적으로 실행됩니다. 즉, 각 업데이트는 완료될 때까지 메인 스레드를 차단합니다. 반면에 동시성 모드는 React가 사용자 상호작용을 우선시하고 반응성을 유지하기 위해 업데이트를 중단, 일시 중지 또는 포기할 수 있도록 합니다. 이는 타임 슬라이싱(time slicing) 및 Suspense와 같은 기술을 통해 달성됩니다.

하지만 이러한 비동기적 특성은 새로운 오류 시나리오를 야기합니다. 컴포넌트가 아직 페칭 중인 데이터를 렌더링하려고 시도하거나 비동기 작업이 예기치 않게 실패할 수 있습니다. 적절한 오류 처리가 없으면 이러한 문제들은 깨진 UI와 실망스러운 사용자 경험으로 이어질 수 있습니다.

React 컴포넌트에서 기존 Try/Catch 블록의 한계

try/catch 블록은 JavaScript에서 오류 처리의 기본이지만, React 컴포넌트 내에서는 특히 렌더링 컨텍스트에서 한계가 있습니다. 컴포넌트의 render() 메서드 내에 직접 배치된 try/catch 블록은 렌더링 자체에서 발생하는 오류를 잡아내지 *못합니다*. 이는 React의 렌더링 프로세스가 try/catch 블록의 실행 컨텍스트 범위 밖에서 발생하기 때문입니다.

다음 예시를 고려해보세요 (예상대로 작동하지 *않을* 것입니다):

function MyComponent() {
  try {
    // `data`가 undefined 또는 null이면 오류가 발생합니다
    const value = data.property;
    return 
{value}
;
  } catch (error) {
    console.error("렌더링 중 오류 발생:", error);
    return 
오류가 발생했습니다!
;
  }
}

이 컴포넌트가 렌더링될 때 `data`가 정의되지 않은 경우, `data.property` 접근은 오류를 발생시킵니다. 그러나 try/catch 블록은 이 오류를 잡아내지 *못합니다*. 오류는 React 컴포넌트 트리를 따라 위로 전파되어 잠재적으로 전체 애플리케이션을 중단시킬 수 있습니다.

에러 바운더리 소개: React의 내장 오류 처리 메커니즘

React는 에러 바운더리(Error Boundary)라는 특수한 컴포넌트를 제공하며, 이는 자식 컴포넌트의 렌더링, 생명주기 메서드 및 생성자에서 발생하는 오류를 처리하도록 특별히 설계되었습니다. 에러 바운더리는 안전망 역할을 하여 오류가 전체 애플리케이션을 중단시키는 것을 방지하고 우아한 폴백(fallback) UI를 제공합니다.

에러 바운더리 작동 방식

에러 바운더리는 다음 생명주기 메서드 중 하나(또는 둘 다)를 구현하는 React 클래스 컴포넌트입니다:

• static getDerivedStateFromError(error): 이 생명주기 메서드는 하위 컴포넌트에서 오류가 발생한 후에 호출됩니다. 오류를 인수로 받아 오류가 발생했음을 나타내도록 상태를 업데이트할 수 있습니다.
• componentDidCatch(error, info): 이 생명주기 메서드는 하위 컴포넌트에서 오류가 발생한 후에 호출됩니다. 오류와 오류가 발생한 컴포넌트 스택에 대한 정보가 포함된 `info` 객체를 받습니다. 이 메서드는 오류를 로깅하거나 오류 추적 서비스(예: Sentry, Rollbar, Bugsnag)에 보고하는 것과 같은 부수 효과를 수행하는 데 이상적입니다.

간단한 에러 바운더리 만들기

다음은 에러 바운더리 컴포넌트의 기본 예시입니다:

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

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 폴백 UI를 표시하도록 상태를 업데이트합니다.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // "componentStack" 예시:
    //   in ComponentThatThrows (created by App)
    //   in MyErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    console.error("에러 바운더리가 오류를 포착했습니다:", error, info.componentStack);
    // 오류 보고 서비스에 오류를 기록할 수도 있습니다
    // logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // 사용자 정의 폴백 UI를 렌더링할 수 있습니다
      return 
문제가 발생했습니다.
;
    }

    return this.props.children; 
  }
}

에러 바운더리 사용하기

에러 바운더리를 사용하려면 오류를 발생시킬 수 있는 컴포넌트를 감싸기만 하면 됩니다:

function MyComponentThatMightError() {
  // 이 컴포넌트는 렌더링 중에 오류를 발생시킬 수 있습니다
  if (Math.random() < 0.5) {
    throw new Error("컴포넌트 실패!");
  }
  return 
모든 것이 정상입니다!
;
}

function App() {
  return (
    
      
    
  );
}

만약 MyComponentThatMightError가 오류를 발생시키면, 에러 바운더리가 이를 포착하고 상태를 업데이트하여 폴백 UI("문제가 발생했습니다.")를 렌더링합니다. 애플리케이션의 나머지 부분은 정상적으로 계속 작동합니다.

에러 바운더리에 대한 중요 고려사항

• 세분성(Granularity): 에러 바운더리를 전략적으로 배치하세요. 전체 애플리케이션을 단일 에러 바운더리로 감싸는 것이 유혹적일 수 있지만, 오류를 격리하고 더 구체적인 폴백 UI를 제공하기 위해 여러 에러 바운더리를 사용하는 것이 종종 더 좋습니다. 예를 들어, 사용자 프로필 섹션이나 데이터 시각화 컴포넌트와 같이 애플리케이션의 다른 섹션에 대해 별도의 에러 바운더리를 가질 수 있습니다.
• 오류 로깅: 원격 서비스에 오류를 기록하기 위해 componentDidCatch를 구현하세요. 이를 통해 프로덕션 환경에서 오류를 추적하고 주의가 필요한 애플리케이션 영역을 식별할 수 있습니다. Sentry, Rollbar, Bugsnag과 같은 서비스는 오류 추적 및 보고를 위한 도구를 제공합니다.
• 폴백 UI: 유용하고 사용자 친화적인 폴백 UI를 디자인하세요. 일반적인 오류 메시지를 표시하는 대신 사용자에게 컨텍스트와 지침을 제공하세요. 예를 들어, 페이지를 새로고침하거나, 지원팀에 문의하거나, 다른 작업을 시도하도록 제안할 수 있습니다.
• 오류 복구: 오류 복구 메커니즘을 구현하는 것을 고려하세요. 예를 들어, 사용자가 실패한 작업을 재시도할 수 있는 버튼을 제공할 수 있습니다. 그러나 재시도 로직에 적절한 안전 장치를 포함하여 무한 루프를 피하도록 주의해야 합니다.
• 에러 바운더리는 트리에서 자신의 *아래에* 있는 컴포넌트의 오류만 포착합니다. 에러 바운더리는 자기 자신 안의 오류를 포착할 수 없습니다. 에러 바운더리가 오류 메시지를 렌더링하다가 실패하면, 오류는 그 위에 있는 가장 가까운 에러 바운더리로 전파됩니다.

Suspense와 에러 바운더리를 사용한 비동기 작업 중 오류 처리

React의 Suspense 컴포넌트는 데이터 페칭과 같은 비동기 작업을 선언적으로 처리하는 방법을 제공합니다. 컴포넌트가 데이터를 기다리느라 "일시 중단(suspends)"(렌더링 일시 중지)되면, Suspense는 폴백 UI를 표시합니다. 에러 바운더리는 이러한 비동기 작업 중에 발생하는 오류를 처리하기 위해 Suspense와 결합될 수 있습니다.

데이터 페칭에 Suspense 사용하기

Suspense를 사용하려면 이를 지원하는 데이터 페칭 라이브러리가 필요합니다. `react-query`, `swr`과 같은 라이브러리 및 `fetch`를 Suspense 호환 인터페이스로 감싸는 일부 커스텀 솔루션으로 이를 달성할 수 있습니다.

다음은 프라미스를 반환하고 Suspense와 호환되는 가상의 `fetchData` 함수를 사용한 간단한 예시입니다:

import React, { Suspense } from 'react';

// Suspense를 지원하는 가상의 fetchData 함수
const fetchData = (url) => {
  // ... (데이터가 아직 없을 때 Promise를 던지는 구현)
};

const Resource = {
  data: fetchData('/api/data')
};

function MyComponent() {
  const data = Resource.data.read(); // 데이터가 준비되지 않으면 Promise를 던집니다
  return 
{data.value}
;
}

function App() {
  return (
    
      로딩 중...

import React, { Suspense, lazy } from 'react';

const MyLazyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    
      컴포넌트 로딩 중...