React의 Error Boundary를 이용하여 효과적으로 에러 처리하기

이 글은 카카오페이지 웹에서 React 16에 도입된 Error Boundary를 활용하여 에러를 효과적으로 처리하는 방법을 공유합니다. 기존의 try-catch 방식 대신 Error Boundary를 사용하면 비동기 컴포넌트에서의 에러 처리를 더욱 간편하고 선언적으로 할 수 있습니다.

특히 API 호출 및 상태 관리를 담당하는 Fetcher 컴포넌트와 함께 Error Boundary를 적용하여, 상품 리스트 페이지와 같이 API 응답에 따라 UI가 달라지는 경우 발생하는 예상치 못한 에러 상황에 유연하게 대처하는 방식을 설명합니다. Redux와 Redux Toolkit을 사용하는 환경에서의 예시 코드를 통해 실제 적용 사례를 보여주며, React Suspense 컴포넌트에서 영감을 받은 Fetcher 컴포넌트의 역할도 함께 설명합니다.