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

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

QA

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가 별도로 분리되어있는 기능을 구현하고싶은데 잘 안돼서 질문드립니다ㅠㅠㅠ

이 질문에 댓글 쓰기 :

답변 1


// ComponentA.jsx
import { useQuery } from 'react-query';
import ComponentB from './ComponentB';
import { fetchSomeData } from './data.js'; 
function ComponentA() {
  const { data, error, isError } = useQuery('data', fetchSomeData);
  if (isError) {
    return <ComponentB error={error} />;
  }
  return <ComponentB data={data} />;
}
export default ComponentA;

 


// ComponentB.jsx
function ComponentB({ data, error }) {
  if (error) {
    throw error; // 에러 발생 시 에러를 throw하여 가장 가까운 ErrorBoundary로 전달
  }
  return (
    <div>
      {/* 데이터를 정상적으로 렌더링 */}
      <p>Data: {JSON.stringify(data)}</p>
    </div>
  );
}
export default ComponentB;
답변을 작성하시기 전에 로그인 해주세요.
전체 38
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT