[#14] tanStack-query, recoil, react-error-boundary 세팅 #18
Conversation
JitHoon
requested review from
turkey-kim,
jinjoo-jung,
jiohjung98,
dabin-Hailey and
ovoxiix
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
수고하셨습니다!
다른 분들도 제가 찾아본 사이트를 함께 보시면 onReset과 onError에 대한 개념은 간단히 이해하실 수 있을 것 같습니다.
https://imshubhamkhandal.medium.com/react-error-boundary-1a5047791429
제가 이해한 바를 우선 설명드리면,
onChange가 변경이 감지됐을 때 실행되는 것처럼 onReset은 에러가 발생한 후 해당 컴포넌트가 reset key에 의해 초기화되었을 때 실행됩니다. 이후 개발을 진행하면서 리액트 쿼리를 사용하게 되면, 아래의 공식 문서에 나와있는 것처럼 에러 컴포넌트를 초기화할 때 해당 컴포넌트 내의 쿼리 에러를 함께 초기화하는 용도로 사용할 수 있습니다.
https://tanstack.com/query/v4/docs/react/reference/useQueryErrorResetBoundary
onError는 에러 바운더리가 에러를 감지했을 때 실행되며 일반적으로는 에러를 기록하는 데 쓰이는데, 저희 프로젝트에서는 굳이 사용하지 않아도 될 것 같습니다.
그리고 use-error-boundary를 사용하면 컴포넌트별로 fallback을 추가하기 쉽기 때문에 use-error-boundary 사용 여부에 대해서도 논의해보면 좋겠습니다.
https://www.npmjs.com/package/use-error-boundary
src/components/index.tsx
Outdated
| // Loading | ||
| export { default as LoadingApp } from './Loading/LoadingApp'; | ||
|
|
||
| // ErrorFallback | ||
| export { default as FallbackApp } from './ErrorFallback/FallbackApp'; |
There was a problem hiding this comment.
LoadingApp과 FallbackApp을 각각 Loading과 ErrorFallback 폴더 내의 index 파일에서 export하지 않는 이유가 궁금합니다.
There was a problem hiding this comment.
components 폴더 최상단에 index.tsx가 남아있어서 여기서 export할 생각만하고 작성했던 것 같습니다.
components 최상단에 있는 index.tsx를 삭제하고 Loading과 ErrorFallback 폴더 내의 index 파일에서 export하는 걸로 변경하겠습니다!
위 링크가 잘 열리지 않는다면, 아래 버튼을 클릭하시면 됩니다. |
| <div> | ||
| <span>App 전체 에러 발생</span> | ||
| <pre style={{ color: 'red' }}>{error.message}</pre> | ||
| <button onClick={() => resetErrorBoundary()}>다시 시도</button> |
There was a problem hiding this comment.
기존에 작성하신 방식은 버튼을 클릭할 때마다, 렌더링될 때마다 익명함수가 생성되고 메모리를 사용한다고 합니다..!
그래서 아래 방식으로 변경하시면 좋을 것같아 제안드립니다!
<button onClick={resetErrorBoundary}>다시 시도</button>
관련하여 이전 프로젝트에서 김민수 멘토님이 남겨주신 코드리뷰 참고하시면 더 도움될 것같아 첨부합니다!
There was a problem hiding this comment.
다빈님 의견 반영해서 코드 수정하였습니다. 좋은 리뷰 감사합니다!
859bbf4
There was a problem hiding this comment.
세팅하시느라 수고 많으셨습니다 은지님이 남겨주신 use-error-boundary 레퍼런스 읽어보았는데 같이 논의하면 좋을 것 같습니다. 저는 https://velog.io/@ajm0718/React-Query-Error-Boundary 이 자료 참고해서 더 찾아보았습니다 ~
지오님께서 참고하신 블로그 저도 전에 참고했었는데 딱 저 내용으로 프로젝트 만들어 나갈 것 같습니다! 공유 감사합니다. 구영표 멘토님께서도 첫 멘토링 추가 답변으로 use-error-boundary를 작성해 주셨는데, 이에 대한 논의를 했던 슬랙 링크 남겨드립니다. |
There was a problem hiding this comment.
저도 OnError, OnReset에 관련해서는 학습 후 코멘트드릴 수 있을 것 같습니다.
처음 도입해보는 방식이라 바로 답변드리기가 쉽지 않네요.
추가로 use-react-errorboundary와 react-error-boundary에 대해서는
개인적으로 후자를 써보는게 어떨까 생각해보았습니다. ( 다른 분들의 의견도 중요할 것 같아요 )
이유는 저희가 접근할 수 있는 번역 레퍼런스가 좀 더 많은 것 같았고
지훈님이 첨부해주신 슬랙을 봤을때 , 멘토님도 후자 라이브러리를 사용하신 것 같습니다.
따라서 사용 중 질문이 있을 때, 피드백받기에 더 좋지 않을까 생각합니다.
There was a problem hiding this comment.
tanStack-query, recoil, react-error-boundary 세팅 하시느라 수고많으셨습니다! 👍🏻
저도 또한 onReset, onError 부분을 더 학습을 한 후에 코멘트 남길 수 있도록 하겠습니다! https://kyuhyuk.kr/article/react/2022/05/24/Use-react-error-boundary-to-handle-errors-in-React
위 링크가 저는 이해가 잘 됐어서 첨부합니다.!
close #14
Description
유의할 점 및 ETC (Optional)