어떻게 해야 더 나은 구조로 작성할 수 있을까 를 고민하며 인터넷을 방황하던 중

kakao FE 기술블로그에서

**Suspense와 선언적으로 Data fetching처리** 라는 김규재님의 포스팅과

정호일 님의 **React의 Error Boundary를 이용하여 효과적으로 에러 처리하기** 를 보게 되었다.

선언적으로 Fetcher 컴포넌트를 사용해, API 호출을 비롯한 비동기 동작을 제어하고,

ErrorBoundary 를 사용해 선언적으로 에러처리를 할 수 있다는 것이다.

마치, try-catch 문의 구조를 컴포넌트로 만들어 놓은 모습이었다.

좌측과 같이 하나의 컴포넌트에서 API 호출, 에러처리, 비동기 처리를 하는 것이 아닌,

하나의 컴포넌트가 각각, 에러처리, 비동기 처리, 데이터 페칭, 데이터 표시를 분담하는 방법이었다.

이렇게 개선되면, 각 컴포넌트의 목적이 뚜렷해지기 때문에, 수정에도 용이해 보였다.

따라서, Suspense와 ErrorBoundary를 도입하고 싶어 React 공식문서를 찾아보았다.

우리의 프로젝트는 Axios를 활용해 서버에서 비동기 데이터를 수신하고 있는데,

이를 지원하는 특정 라이브러리(SWR, Relay, Recoil 등)가 있었다.