React의 Error Boundary는 비동기 코드에서 발생한 오류를 잡을 수 없습니다. 그 이유는 비동기 에러는 렌더링 시점의 콜스택이 모두 비워진 후에 발생하기 때문입니다.
React는 컴포넌트를 렌더링할 때 하나의 연속된 콜스택 흐름 안에서 작업을 처리하며, Error Boundary도 이 렌더링 흐름 중에 실행됩니다. 따라서 Error Boundary는 동기적인 렌더링 과정 중에 발생한 오류를 감지할 수 있습니다.
하지만 Promise, setTimeout과 같은 비동기 작업은 렌더링이 끝난 후, 즉 렌더링 시점의 콜스택이 모두 비워진 후에 수행됩니다. 따라서 Error Boundary는 해당 시점에 발생하는 오류를 잡을 수 없습니다.
이러한 점 때문에, 비동기 에러는 별도로 직접 처리해야 합니다. 예를 들어, 비동기 함수 내부에서 try-catch로 감싸서 에러를 핸들링할 수 있습니다. 또는, setState를 이용해 에러 상태를 관리하거나, 이를 활용해 동기 에러를 다시 던져 에러 바운더리가 감지하도록 만들 수 있습니다.
출처 - 매일메일
'개발 관련 토막지식' 카테고리의 다른 글
| 리액트의 state와 props (0) | 2026.01.28 |
|---|---|
| 자바스크립트의 이벤트 루프(+ 매크로태스크 큐, 마이크로태스크 큐) (0) | 2026.01.26 |
| 스택을 활용한 브라우저의 뒤로가기/앞으로가기 (0) | 2026.01.15 |
| 쿠키와 세션 (+Stateless구조, XSS) (0) | 2026.01.15 |
| React의 리렌더링 과정 (0) | 2026.01.06 |