<div id="readability-page-1" class="page"><div id="dkContent" role="main">

					

					<p>
						<h2><span>강디너의 개발 일지</span></h2>
					</p>

					
						


						
							
							
							<div>                        <p data-ke-size="size16">에러 바운더리 사용해보기</p>

<ol data-ke-list-type="decimal">
<li>공통 오류 컴포넌트 적용하기</li>
<li>특정 컴포넌트만 다른 오류 컴포넌트 적용하기</li>
<li><b>고민</b></li>
</ol>

<p data-ke-size="size16">공식 문서 : <a href="https://react-query.tanstack.com/guides/suspense" target="_blank" rel="noopener">https://react-query.tanstack.com/guides/suspense</a></p>

<p data-ke-size="size16">코드 : <a href="https://github.com/DinnerKang/study_react/tree/main/packages/react-query" target="_blank" rel="noopener">https://github.com/DinnerKang/study_react/tree/main/packages/react-query</a></p>

<h4 data-ke-size="size20">1. 공통 오류 컴포넌트 적용하기</h4>
<p data-ke-size="size16">최상위 루트에서 선언하고 QueryClient에 defaultOptions를 설정해서 suspense 값을 변경해줍니다.</p>
<p data-ke-size="size16">그 후 ErrorBoundary를 선언해주면 하위 컴포넌트들은 이제 패칭 오류가 날 때 해당 ErorrComponent가 보입니다.</p>
<pre id="code_1641104816964" data-ke-language="javascript" data-ke-type="codeblock"><code>import {
  QueryClient,
  QueryClientProvider,
  useQueryErrorResetBoundary,
} from 'react-query';
import { ErrorBoundary } from 'react-error-boundary'

function App() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        suspense: true,
      },
    },
  });
  const { reset } = useQueryErrorResetBoundary();

  return (
    &lt;QueryClientProvider client={queryClient}&gt;
      &lt;ErrorBoundary
       onReset={reset}
       fallbackRender={({ resetErrorBoundary }) =&gt; (
         &lt;ErrorComponent /&gt;
       )}
     &gt;
       &lt;div className="App"&gt;
          &lt;Users /&gt;
        &lt;/div&gt;
     &lt;/ErrorBoundary&gt;
      &lt;ReactQueryDevtools initialIsOpen={false} /&gt;
    &lt;/QueryClientProvider&gt;
  );
}</code></pre>
<figure data-origin-width="2044" data-origin-height="810" data-ke-mobilestyle="alignCenter"><span data-url="https://blog.kakaocdn.net/dn/VfEM3/btrpq7hZOhb/vgTHXEVmk8V3gtK8egt600/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/VfEM3/btrpq7hZOhb/vgTHXEVmk8V3gtK8egt600/img.png" data-ke-mobilestyle="alignCenter"></span></figure>


<h4 data-ke-size="size20">2. 특정 컴포넌트만 다른 오류 컴포넌트 적용하기</h4>
<p data-ke-size="size16">상위 컴포넌트에서 defaultOptions으로 suspense 값을 주었다고 해도 사용하는 곳에서도 다시 설정 가능합니다.</p>
<p data-ke-size="size16">그래서 아래 코드 처럼 useQuery할 때 옵션을 수정해주면 별도의 오류 컴포넌트를 보여줄 수 있습니다.</p>
<pre id="code_1641106701796" data-ke-language="javascript" data-ke-type="codeblock"><code>const Users = () =&gt; {
  const queryClient = useQueryClient();
  const [userId, setUserId] = useState&lt;number&gt;(5);
  // Query
  const { isLoading, data, isError } = useQuery('users', getUserWithAxios, {
    staleTime: 5000,
    suspense: false,
  });
	
   if (isError) return &lt;div&gt;에러&lt;/div&gt;;
  ...
}</code></pre>
<figure data-origin-width="2000" data-origin-height="626" data-ke-mobilestyle="alignCenter"><span data-url="https://blog.kakaocdn.net/dn/odfL6/btrpyjgTcu0/uWbtKfHNZtvVYc3FSZ0zy0/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/odfL6/btrpyjgTcu0/uWbtKfHNZtvVYc3FSZ0zy0/img.png" data-ke-mobilestyle="alignCenter"></span></figure>



<h4 data-ke-size="size20">3. 고민</h4>
<p data-ke-size="size16">과연 최상위에서 ErrorBoundary를 써서 컨트롤 하는게 맞나 라는 생각이 들었다.</p>
<p data-ke-size="size16">에러 처리하는 것을 공통으로 관리해서 편하다는 장점은 확실한데 사용자 측면에서는 뭔가 불편할듯한 느낌 ??</p>

<p data-ke-size="size16">예를들어 네이버 홈에서 오늘 읽을만한 글 API 하나가 오류인데 전체 페이지가 오류인 것 처럼 오류 컴포넌트가 덮으면 이상할 것 같은 느낌? 테이블 하나만 오류인데 전체 페이지가 오류 컴포넌트를 보여주면 사용자는 불편... 할 것 같은 느낌이 들었다.</p>

<p data-ke-size="size16">하나의 API가 오류일 경우 부분부분 오류 컴포넌트를 보여주는게 좋을 것 같은데... 라는 생각이 들면서도 유저 정보나 중요한 API가 오류일 경우에는 오류 컴포넌트로 화면을 감싸는게 좋을 것 같고...&nbsp;</p>

<p data-ke-size="size16">그리고 개발할때 무슨 오류만 나면 화면 안보여주고 에러 컴포넌트가 나오면 빡칠듯...&nbsp; post 오류인데도 오류니깐 에러 컴포넌트로 가고 막 그러면.... 공통으로 적용할때에는 디테일들을 신경 많이 써줘야 할 것 같다.</p>

<p data-ke-size="size16"><b>결론</b></p>
<p data-ke-size="size16"><b>오류 컴포넌트를 적용하는 부분에도 신경써야하는 부분과 결정해야하는 부분이 많은 것 같다.</b></p>

</div>
						
							<p><img src="https://tistory4.daumcdn.net/tistory/2781910/skin/images/giveMe.png" alt="커피한잔...">
							</p>
							

							
								
							

							


						
					

					

					

					

					

					

					
						
					
				</div></div>

강디너의 개발 일지

에러 바운더리 사용해보기
 
공통 오류 컴포넌트 적용하기
특정 컴포넌트만 다른 오류 컴포넌트 적용하기
고민
 
공식 문서 : https://react-query.tanstack.com/guides/suspense
 
코드 : https://github.com/DinnerKang/study_react/tree/main/packages/react-query
 
1. 공통 오류 컴포넌트 적용하기
최상위 루트에서 선언하고 QueryClient에 defaultOptions를 설정해서 suspense 값을 변경해줍니다.
그 후 ErrorBoundary를 선언해주면 하위 컴포넌트들은 이제 패칭 오류가 날 때 해당 ErorrComponent가 보입니다.
import {
  QueryClient,
  QueryClientProvider,
  useQueryErrorResetBoundary,
} from 'react-query';
import { ErrorBoundary } from 'react-error-boundary'
function App() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        suspense: true,
      },
    },
  });
  const { reset } = useQueryErrorResetBoundary();
  return (
    <QueryClientProvider client={queryClient}>
      <ErrorBoundary
       onReset={reset}
       fallbackRender={({ resetErrorBoundary }) => (
         <ErrorComponent />
       )}
     >
       <div className="App">
          <Users />
        </div>
     </ErrorBoundary>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}
 
 
2. 특정 컴포넌트만 다른 오류 컴포넌트 적용하기
상위 컴포넌트에서 defaultOptions으로 suspense 값을 주었다고 해도 사용하는 곳에서도 다시 설정 가능합니다.
그래서 아래 코드 처럼 useQuery할 때 옵션을 수정해주면 별도의 오류 컴포넌트를 보여줄 수 있습니다.
const Users = () => {
  const queryClient = useQueryClient();
  const [userId, setUserId] = useState<number>(5);
  // Query
  const { isLoading, data, isError } = useQuery('users', getUserWithAxios, {
    staleTime: 5000,
    suspense: false,
  });
	
   if (isError) return <div>에러</div>;
  ...
}
 
 
 
3. 고민
과연 최상위에서 ErrorBoundary를 써서 컨트롤 하는게 맞나 라는 생각이 들었다.
에러 처리하는 것을 공통으로 관리해서 편하다는 장점은 확실한데 사용자 측면에서는 뭔가 불편할듯한 느낌 ??
 
예를들어 네이버 홈에서 오늘 읽을만한 글 API 하나가 오류인데 전체 페이지가 오류인 것 처럼 오류 컴포넌트가 덮으면 이상할 것 같은 느낌? 테이블 하나만 오류인데 전체 페이지가 오류 컴포넌트를 보여주면 사용자는 불편... 할 것 같은 느낌이 들었다.
 
하나의 API가 오류일 경우 부분부분 오류 컴포넌트를 보여주는게 좋을 것 같은데... 라는 생각이 들면서도 유저 정보나 중요한 API가 오류일 경우에는 오류 컴포넌트로 화면을 감싸는게 좋을 것 같고... 
 
그리고 개발할때 무슨 오류만 나면 화면 안보여주고 에러 컴포넌트가 나오면 빡칠듯...  post 오류인데도 오류니깐 에러 컴포넌트로 가고 막 그러면.... 공통으로 적용할때에는 디테일들을 신경 많이 써줘야 할 것 같다.
 
결론
오류 컴포넌트를 적용하는 부분에도 신경써야하는 부분과 결정해야하는 부분이 많은 것 같다.

React-Query Error Boundary

댓글