React에서 로딩 상태 관리: useNavigation vs useIsFetching

React 애플리케이션에서 로딩 상태를 관리하는 것은 사용자 경험을 향상시키는 중요한 요소입니다. 오늘은 두 가지 유용한 훅인 `useNavigation`과 `useIsFetching`에 대해 알아보고, 각각의 특징과 사용 사례를 비교해 보겠습니다.

useNavigation (React Router)

useNavigation은 React Router에서 제공하는 훅으로, 현재 라우트와 관련된 네비게이션 상태를 추적합니다.

특징:

• 페이지 이동, 폼 제출 등 라우터와 관련된 작업의 상태를 감지
• 'idle', 'loading', 'submitting' 등 세부적인 상태 정보 제공
• 현재 활성화된 라우트와 관련된 상태만 추적

예시 코드:

import { useNavigation } from 'react-router-dom';

function Header() {
  const navigation = useNavigation();
  const isLoading = navigation.state !== 'idle';

  return (
    <header>
      {isLoading && <div>Loading...</div>}
      <h1>My App</h1>
    </header>
  );
}

useIsFetching (React Query)

useIsFetching은 React Query에서 제공하는 훅으로, 애플리케이션 전체의 데이터 fetching 상태를 추적합니다.

특징:

• 백그라운드에서 일어나는 모든 쿼리 요청의 상태를 감지
• 전역적인 로딩 상태를 표시하는 데 유용
• 단순히 fetching 중인지 아닌지만 알려줌

예시 코드:

import { useIsFetching } from '@tanstack/react-query';

function GlobalLoadingIndicator() {
  const isFetching = useIsFetching();

  return isFetching ? (
    <div>Queries are fetching in the background...</div>
  ) : null;
}

비교 및 선택 기준

• useNavigation: 현재 라우트와 관련된 상태
• useIsFetching: 앱 전체의 데이터 fetching 상태

2. 사용 목적:
   • useNavigation: 페이지 전환이나 폼 제출 같은 사용자 액션의 진행 상태 표시
   • useIsFetching: 백그라운드 데이터 로딩 표시
3. 세부 정보:
   • useNavigation: 더 세부적인 상태 정보 제공
   • useIsFetching: 단순히 fetching 중인지 아닌지만 알려줌

어떤 것을 선택해야 할까?

사용자 경험을 고려할 때, 대부분의 경우 useNavigation을 사용하는 것이 좋습니다. 그 이유는 다음과 같습니다:

1. 사용자가 인지할 수 있는 변화에 집중합니다.
2. 불필요한 로딩 표시를 줄여 UI를 깔끔하게 유지합니다.
3. 사용자에게 더 의미 있는 피드백을 제공합니다.
4. 애플리케이션이 더 빠르고 반응성이 좋다고 느끼게 합니다.

하지만 특정 상황에서는 useIsFetching이 유용할 수 있습니다. 예를 들어, 백그라운드에서 중요한 데이터 업데이트가 일어나고 있음을 사용자에게 알려야 할 때 사용할 수 있습니다.

결론적으로, 애플리케이션의 요구사항과 사용자 경험을 고려하여 적절한 방법을 선택하거나, 두 가지를 조합하여 사용하는 것이 좋습니다.