Suspense
- React18에서 새로 도입된 기능
- 트리의 외부를 감싸 내부의 컴포넌트가 로딩중일 때에 내부 트리의 렌더링을 멈추고 suspence 안에 fallback 속성에 넘긴 컴포넌트(spinner, loading indicator)를 대신 보여주고, 내부 트리에서의 작업이 종료되면 그때 내부 트리를 렌더링하는 기능을 한다
- React.lazy를 적용한 동적 컴포넌트들은 무조건적으로 suspense로 감싸진 트리 안에서 렌더링되어야 한다
- SSR에서는 지원하지 않아, 이를 대응하기 위한 커스텀이 필요하다
ErrorBoundary
- 자식 컴포넌트 트리 내의 JS 오류를 감지, 기록, 해당 컴포넌트 대신 대체 UI를 표시하도록 하는 컴포넌트를 말한다
- 클래스 컴포넌트에 static getDerivedStateFromError() 또는 componentDidCatch()를 정의하여 사용하는 컴포넌트를 의미한다
- 반드시 Error boundary는 예측하지 않은 예외를 처리하여 복구하는 경우에만 사용하도록 공식문서에서 권고한다
- 하위 컴포넌트의 에러를 감지하지만, 본인의 에러는 감지하지 못한다
참고 사이트
