최종적으로 원하는 결과물은 아래와 같다

1. ErrorBoundary 를 이용하여 UserInfoSection 컴포넌트에서 error 상태 분리하기
   1. 기본적인 컴포넌트 구성하기
   2. 에러 발생시키기
   3. 에러 바운더리 설치하기
   4. 에러 바운더리 적용하기
2. Suspnse 를 이용하여 UserInfoSection 컴포넌트에서 loading 상태 분리하기
3. api 의 data 에 대한 타입 검증은 zod 에서 관리하고 처리한다

ErrorBoundary 를 이용하여 UserInfoSection 컴포넌트에서 error 상태 분리하기

기본적인 컴포넌트 구성하기

아래 처럼 간단한 화면 구성이 존재한다고 가정하자

import "./App.css";
const some = "hello world";
function App() {
  return (
    <>
      <div>userInfo</div>
      <div>latest Posts</div>
      <div>평범한 사진</div>
    </>
  );
}

export default App;

에러 발생시키기

위 영역 중 userInfo div 영역에 존재하지 않는 some 오브젝트의 name 에 접근해보자

function App() {
  return (
    <>
+      {/* some은 존재하지 않는 객체이며 이 객체의 name 속성에 접근 할 경우 */}
+      <div>{some.name}</div>
       <div>latest Posts</div>
       <div>평범한 사진</div>
    </>
  );
}

에러가 발생헀으며 에러는 전역으로 퍼져나가 위 처럼 모든 화면이 횐색으로 변 할 것이다

에러 바운더리 설치하기

이를 방지하기 위해 react-error-boundary 컴포넌트를 설치하자
위 에러 바운더리 라이브러리는 공식문서에서도 더이상 class형태의 에러바운더를 작성 하지 않아도 된다고 안내하며
대신 추천?하는 라이브러리로 등장한다

> npm i react-error-boundary

에러 바운더리 적용하기

에러를 발생 시키는 영역을 별도의 컴포넌트로 분리하고 react-error-boundary 를 씌우자

// src/UserInfoSection.tsx
+ export default function UserInfoSection() {
+   return <div>{some.name}</div>;
+ }
// src/App.tsx
function App() {
  return (
    <>
+     <ErrorBoundary fallback={<div>문제 발생</div>}>
+       <UserInfoSection />
+     </ErrorBoundary>
      <div>latest Posts</div>
      <div>평범한 사진</div>
    </>
  );
}

전역 에러 상태는(흰화면) 피했고 문제 발생이라는 대체 에러 텍스트가 나타난다

결과적으로 UserInfoSection 컴포넌트는 error 상태를 직접적으로 알 필요도 없고 관리 할 필요도 없어졌다
단순히 에러가 나타나면 상위로 에러를 던지며 react-error-boundary 가 처리한다

번외) 에러바운더리 hoc 적용하기

여기서 고민 해 봐야 할 것이 UserInfoSection 컴포넌트 위에 ErrorBoundary 가 존재하기에 UserInfoSection 컴포넌트를 다른 페이지에서 사용 한다면 UserInfoSection 컴포넌트마다 ErrorBoundary 생성 해 줘야 하는 문제가 존재한다

해결책으로는 ErrorBoundary와 UserInfoSection을 하나로 통합한 wrapper를 만드는 것인데 이를 react-error-boundary가 지원한다 (hoc)

• 정확하게는 wrapper와 hoc 개념은 다릅니다!

---

UserInfoSection.tsx

+ import { withErrorBoundary } from "react-error-boundary";

function UserInfoSection() {
  return <div>{some.name}</div>;
}

+ const UserInfoSectionWithBoundary = withErrorBoundary(UserInfoSection, {
+   fallback: <div>문제 발생</div>,
+ });

App

export default UserInfoSectionWithBoundary;

function App() {
  return (
    <>
-      <UserInfoSection />
+      <UserInfoSectionWithBoundary />
      <div>latest Posts</div>
      <div>평범한 사진</div>
    </>
  );
}

참고문서

• https://www.npmjs.com/package/react-error-boundary#witherrorboundary-hoc