woowacourse-teams / 2022-gong-seek

공식(공유해줘 너의 지식) : 우테코 크루들을 위한 질문 게시판
https://gongseek.site
60 stars 5 forks source link

로딩에 대해서 선언적으로 리팩토링을 진행한다. #900

Open hwangstar156 opened 1 year ago

hwangstar156 commented 1 year ago

어떠한 문제를 해결하려고 했나요?

기존 error에 대해서는 ErrorBoundary를 이용하여 선언적으로 처리하고 있지만 로딩에 대해서는 선언적으로 처리하는 것이 없기에 추가해줘야 한다.

어떻게 문제를 해결하였나요?

react-query의 suspense: true 옵션과 함께 Suspense를 이용하여 로딩에 대한 로직을 위임하였습니다.

트러블 슈팅

기존 ErrorBoundary가 작동하지 않는 문제

ErrorBoundary를 이용하기 위해 useThrowCustomError를 이용하였는데 이것이 suspense: true와 함께할시 에러를 잡지 못하는 문제가 발생하였다.

확인결과 suspense: true를 이용하면 useErrorBoundary가 저절로 true가 되어 생기는 문제였다. 현재 useErrorBoundary 옵션대신 useThrowCustomError로 처리하고 있기에 useErrorBoundary옵션을 false로 주어 해결하였습니다.