Suspense와 ErrorBoundary를 사용하여 간단히 로딩 및 에러 처리하기

오늘은 useSuspenseQuery(그리고 React Suspense)와 ErrorBoundary를 사용하여

비동기 데이터를 요청할 때 로딩과 에러 처리를 효율적으로 다뤄보겠슨비다.

 

useSuspenseQuery 란..?

 

React Suspense와 Tanstack Query를  함께 사용하여

데이터 로딩 상태를 관리하는 훅입니다. useQuery와 비슷하지만

Suspense와 함께 작동합니다.기본적으로 Suspense에서 로딩 상태를

처리하고 useSuspenseQuery는  성공적인 응답 데이터를 반환할 때까지

컴포넌트의 렌더링을 중단하는 역할입니다!

 

 

여기서 React Suspense는

 

비동기 데이터를 가져올 때 동안 UI를 렌더링하지 않고 대기하는 기능입니다

따라서 Suspense를 사용하여 로딩중이라는 메세지 혹은

스피너 같은 기능으로 사용자의 경험을 향상시킬 수 있습니다.

 

사용 예시

import { useSuspenseQuery } from "@tanstack/react-query";
import queryKey from "./queryKey.keys";
import api from "./../services/api";

const useGetRestaurantsQuery = () => {
  return useSuspenseQuery({
    queryKey: queryKey.default.restaurants,
    queryFn: api.getRestaurants,
  });
};

 

 

useSuspenseQuery를 사용할 때 useQuery와 마찬가지로

queryKey와 queryFn을 설정하여 서버로부터 데이터를 가져옵니다.

 

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<>loading...</>}>
        <Router />
      </Suspense>
    </QueryClientProvider>
  );
};

 

App.jsx든 상위 컴포넌트가 되는 컴포넌트에 Suspense를 예시 코드와 같이 감싼 후

fallback에 로딩중일 때 표시할 UI를 전달합니다. 스피너와 같은 UI를 전달할 수도 있습니다

 

Suspense를 사용하는 이유

 

• 로딩 상태를 관리하는 코드를 최소화하고
• 비동기 데이터 로딩을 더 직관적이고 간단하게 처리할 수 있음
• Tanstack Query의 isLoading, isError 등의 상태를 관리하지 않고, Suspense와 ErrorBoundary를 통해 자동화된 처리를 할 수 있음

 

따라서 Suspense를 활용함으로서 코드가 간결해지고 로딩 및 에러 처리를

단순하게 할 수 있으며 이는 더 나은 사용자 경험에도 영향을 미칠  수 있습니다

 

주의사항

• Suspense는 아직 서버 컴포넌트에서의 완전한 사용이 제한적이므로
  클라이언트 사이드 렌더링에서 사용하는 것이 더 일반적이라고 함

 

ErrorBoundary란?

React의 Error Boundary는 컴포넌트에서 발생하는 JavaScript 에러를 잡아서

UI 상에서 표시하는 기능을 제공하는 컴포넌트입니다 Suspense로 로딩 상태를 처리할 때

비동기 작업에서 에러가 발생할 수 있으므로 Error Boundary를 추가하여 에러 처리도 함께 관리할 수 있습니다.

 

 

사용 예시

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 로깅 등을 여기서 할 수 있음
    console.error("에러 : ", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 폴백 UI를 렌더링
      return <h1>잘못되었다 잘못 되었어</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

 

 

 

componentDidCatch와 getDerivedStateFromError 메서드를 활용하여

에러를 감지하고 fallback UI를 표시하는 컴포넌트를 만들어 사용할 수 있습니다.

 

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <ErrorBoundary>
        <Suspense fallback={<div>Loading...</div>}>
          <Router />
        </Suspense>
      </ErrorBoundary>
    </QueryClientProvider>
  );
};

 

Suspense로 비동기 작업의 로딩 상태를 처리하는 동안,

에러가 발생하면 ErrorBoundary에서 처리할 수 있게 합니다.

 

 

마치며

 

Suspense와 ErrorBoundary를 함께 사용하여 로딩 및 에러 상태를 효율적으로 처리하고

코드 가독성 및 유지 보수에도 많은 도움을 줄 것 같스빈다 

이 방법을 좀 더 빨리 알았다면 같은 코드를 반복할 필요 없었을 탠데 하는 아쉬움이 있네요

추석이 끝나갑니다..ㅠㅠ 추바오 가지마.....