반응형
Async Boundary
-
[React] Concurrecy(동시성) - #2. Error BoundaryFront-End(Web)/React - 프레임워크(React, Next) 2022. 10. 27. 19:58
지난 포스팅에선, Code Splitting(코드 분할) 그리고 이를 React에서 구현하는 Suspense와 React.lazy를 알아보았다. Suspense는 비동기 컴포넌트(React.lazy) 혹은 비동기 데이터 요청에 따른 선언적 Loading UI 노출에도 유용하다. 물론 이 비동기 요청에서 에러가 발생할 수 있고, 이를 위임하는 기능인 Error Boundary 에 대해 정리해보겠다. 💙 React의 Error Boundary 컴포넌트 내의 Javascript 에러가 발생하면, 컴포넌트 트리가 깨지며 정상적으로 렌더링되지 않는다. 기존에는 이를 처리 및 복구할 방법이 없었으나, React 16부터 Error Boundary 이라는 컨셉을 제안하게 된다. 이는, 자식 컴포넌트 트리에서 발생한 ..