인프런 커뮤니티 질문&답변

질문하기 전에 꼭 읽어주세요!

안녕하세요, 프론트엔드 마스터클래스 강의를 수강해 주셔서 감사합니다!

질문을 통해 프론트엔드 개념을 더 깊이 이해하고, 실무에 바로 적용할 수 있는 기회를 만들어보세요. 질문을 남기실 때 아래 가이드라인을 참고해 주시면 더 빠르고 정확한 답변을 드릴 수 있습니다.

질문 작성 가이드

1. 질문 제목: 리액트 에러처리
ErrorBoundary+Suspense
2. 질문 내용:

현재 구조가 (case1)
index.jsx
└ Suspense
└ App (lazy import)
└ ErrorBoundary (App 내부)

이런 구조입니다.
index.jsx에서 fetch 를 실패하면 ErrorBoundary 내부의 componentDidCatch에 콘솔은 찍히는데 무한히 찍히고, ErrorBoundary 에서 렌더링 하는 fallback은 보이지 않고 흰 화면에서 앱이 죽습니다.


이 구조로 바꿔보니(case2)
index.jsx
└ ErrorBoundary
└ Suspense
└ App (lazy import)
index.jsx에서 fetch 를 실패하면 ErrorBoundary 의 fallback 이 잘 보입니다.


이 구조로 바꿔보니(case3)
index.jsx
└ Suspense
└ App (lazy import)
index.jsx에서 fetch 를 실패하면 그냥 기존 화면이 보입니다.
이 원리를 모르겠습니다.
저는 case2 경우에 fetch를 실패가 ui렌더 단계의 실패로 이어지니까 그냥 ErrorBoundary에서 fallback이 보여질거라 예상했는데
왜 흰화면에 무한르프로 앱이 죽는지 모르겠습니다. gpt도 Suspense랑 ErrorBoundary 시점이 꼬여서 그렇다는데 이해가 잘 안가서 질문드립니다.