#error-boundary

털먹는토끼털먹는토끼· 11개월

질문React ErrorBoundary 관련 fallback UI 렌더링 이슈 질문

React-query를 이용해 비동기함수를 호출 시 발생한 에러를 errorboundary에 throw하고 fallbackUI를 렌더링하는 기능을 구현하려합니다. <ErrorBoundary FallbackComponent={ErrorFallback} onReset={reset}> <ComponentA /> </ErrorBoundary> ErrorBoundary 에러핸들링의 경우 위 코드처럼 react-query에서 발생한 에러를 가장 가까운 ErrorBoundary로 던지는 구조기 떄문에 react-query를 직접 참조하는 컴포넌트(<ComponentA />)를 ErrorBoundary로 감싸줘야 한다고 들었습니다. 만약 A컴포넌트에서 react-query로 받아온 data를 B컴포넌트에 props로 전달하고 B컴포넌트에서 data값을 렌더링시키는 구조일 때 비동기함수 호출 시 에러가 발생했을 때 fallback ui가 띄워지는 곳은 B컴포넌트 영역이 되도록 하는 방법은 없을까요?? 비동기처리하는 버튼과 FallbackUI가 별도로 분리되어있는 기능을 구현하고싶은데 잘 안돼서 질문드립니다ㅠㅠㅠ
136
2
0
닥터핸
닥터핸·2024-05-09
React-query를 사용할 때 발생한 에러를 다루고, 이 에러를 특정 컴포넌트의 ErrorBoundary로 처리하여 해당 위치에서 fallbackUI를 렌더링하도록 구성하기 위해 아래 몇 가지 접근 방법을 사용할 수 있습니다. 방법 1: B컴포넌트를 ErrorBoundary로 감싸기 A컴포넌트에서 데이터를 가져와 B컴포넌트에 전달하는 구조에서, B컴포넌...