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

Javascript

털먹는토끼

7개월 전

털먹는토끼

7개월 전

댓글 2

닥터핸

React-query를 사용할 때 발생한 에러를 다루고, 이 에러를 특정 컴포넌트의 ErrorBoundary로 처리하여 해당 위치에서 fallbackUI를 렌더링하도록 구성하기 위해 아래 몇 가지 접근 방법을 사용할 수 있습니다.

방법 1: B컴포넌트를 ErrorBoundary로 감싸기

A컴포넌트에서 데이터를 가져와 B컴포넌트에 전달하는 구조에서, B컴포넌트 자체를 ErrorBoundary로 감싸는 방법입니다.

이렇게 하면 A컴포넌트에서 데이터를 가져올 때 발생하는 에러를 B컴포넌트에서 처리할 수 있습니다.

<ErrorBoundary FallbackComponent={ErrorFallback} onReset={reset}>
  <ComponentA />
</ErrorBoundary>

// ComponentA 내부
function ComponentA() {
  const { data, error } = useQuery('someKey', fetchData);

  if (error) throw error;
  return <ComponentB data={data} />;
}

// ComponentB 내부
function ComponentB({ data }) {
  return (
    <ErrorBoundary FallbackComponent={BComponentFallback}>
      <div>{data.someValue}</div>
    </ErrorBoundary>
  );
}

방법 2: 에러 전파하기

A컴포넌트에서 에러를 캡쳐하고 이를 B컴포넌트로 전달하여, B컴포넌트 내부에서 에러를 처리하도록 합니다.

이 경우, B컴포넌트 내부에서 에러를 확인하고 적절한 fallbackUI를 직접 렌더링할 수 있습니다.

// ComponentA 내부
function ComponentA() {
  const { data, error } = useQuery('someKey', fetchData);

  return <ComponentB data={data} error={error} />;
}

// ComponentB 내부
function ComponentB({ data, error }) {
  if (error) {
    return <BComponentFallback />;
  }

  return <div>{data.someValue}</div>;
}

방법 3: Custom Hook 사용

A컴포넌트에서 데이터를 가져오는 로직을 커스텀 훅으로 분리하고, 이 훅을 B컴포넌트에서 사용하여 에러를 직접 처리할 수 있게 합니다.

이 방법은 B컴포넌트가 데이터를 직접 요청하고, 에러를 처리하도록 하는 구조입니다.

// useCustomQuery 훅
function useCustomQuery() {
  const { data, error, isLoading } = useQuery('someKey', fetchData);
  return { data, error, isLoading };
}

// ComponentB 내부
function ComponentB() {
  const { data, error } = useCustomQuery();

  if (error) {
    return <BComponentFallback />;
  }

  return <div>{data.someValue}</div>;
}

7개월 전 ∙ 0 ∙ 답글 달기 ∙ 공유 ∙ 신고 ∙ 차단

털먹는토끼

@닥터핸 오 에러를 전파하면 되는거였군요!! 말씀해주신 2번처럼 ComponentA에서 발생한 에러를 B로 전달한 후 throw 해주니까 에러바운더리가 잘 동작하네요ㅎㅎ 이렇게 간단한거였다니... 알려주셔서 정말 감사합니다!!

7개월 전 ∙ 1 ∙ 답글 달기 ∙ 공유 ∙ 신고 ∙ 차단

뎁스노트 앱으로 보시겠습니까?

방법 1: B컴포넌트를 ErrorBoundary로 감싸기

방법 2: 에러 전파하기

방법 3: Custom Hook 사용