error-boundaries

// ❌ `try`/`catch`는 렌더링 오류를 잡을 수 없음
function Parent() {
  try {
    return <ChildComponent />; // 여기서 오류가 발생하면 catch가 도움이 되지 않음
  } catch (error) {
    return <div>Error occurred</div>;
  }
}

// ✅ Error Boundary 사용
function Parent() {
  return (
    <ErrorBoundary>
      <ChildComponent />
    </ErrorBoundary>
  );
}

// ❌ `use` Hook 주위의 try/catch
function Component({promise}) {
  try {
    const data = use(promise); // 잡을 수 없음 - `use`는 던지지 않고 일시 중단함
    return <div>{data}</div>;
  } catch (error) {
    return <div>Failed to load</div>; // 도달 불가
  }
}

// ✅ Error Boundary가 `use` 오류를 잡음
function App() {
  return (
    <ErrorBoundary fallback={<div>Failed to load</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <DataComponent promise={fetchData()} />
      </Suspense>
    </ErrorBoundary>
  );
}