[T/S] Navbar에서 로그인 상태에 따른 isPending 동작 오해 (React Query 상태 혼동)

문제상황

로그인 하기 전

로그인 했을 때

 

현재 구현 중인 Navbar는 로그인 상태에 따라 표시되는 UI가 달라지도록 설계되어 있다.

• 로그인 전 → “로그인”, “회원가입” 버튼 표시
• 로그인 후 → “OOO님 반갑습니다!” 문구와 “로그아웃” 버튼 표시

이를 위해 `useGetMyInfo` 훅을 사용하여 사용자 정보를 가져오고 있는데,

isPending 상태를 기준으로 로딩 스피너를 표시하도록 변경한 이후 LoadingSpinner가 계속 돌아가며 화면이 멈추는 현상이 발생했다.

 

 

원인분석

무한로딩 상태

 

관련 코드

const { data, isPending, isError } = useGetMyInfo({ enabled: !!accessToken });

if (isPending) return <LoadingSpinner />

 

기대 동작

• 로그인 상태 (`accessToken`이 존재)일 경우 → 사용자 정보를 정상적으로 불러오기
• 로그아웃 상태 (`accessToken`이 존재하지 않을 때)일 경우 → 쿼리가 비활성화 (`enabled: false`)되면서 로딩이 발생하지 않아야 함

 

원인 분석

• `isPending`은 쿼리가 아직 실행되지 않은 상태를 의미한다.
  • 쿼리가 아직 실행되지 않았으면 `isPending` 값은 `true`
  • 쿼리가 실행되면 `isPending` 값은 `false`
• `enabled: false`로 설정된 경우, 쿼리가 실행되지 않음
  • 로그인 상태일 경우 → 쿼리가 실행됨
  • 로그아웃 상태일 경우 → 쿼리가 실행되지 않음

→ 로그아웃 상태일 때는 쿼리가 실행되지 않으므로 `isPending` 값은 항상 `true`이다.

 

 

해결 방법

const { data, isLoading, isError } = useGetMyInfo({ enabled: !!accessToken });

if (isLoading) return <LoadingSpinner />

 

`isPending` 대신 `isLoading`을 사용해주면 정상 작동한다. 

 

 

관련 개념 정리

React Query를 사용할 때 자주 등장하는 값 중, 헷갈리기 쉬운 세 가지 상태값이 있다 : `isPending`, `isLoading`, `isFetching`

이 값들은 모두 로딩과 관련된 상태를 나타내지만, 각각의 의미와 동작 시점은 미묘하게 다르다.

isPending

쿼리가 아직 시작되지 않은 상태를 의미하는데, 특히 `enabled: false`로 설정되어 있다면, React Query는 쿼리를 실행하지 않고 그 동안 `isPending`값을 계속 `true`로 유지한다. 즉, 아직 요청조차 보내지 않은 상태를 표현하는 값이기 때문에 `enabled` 조건을 걸어둔 쿼리에서는 `isPending`을 로딩 판단 기준으로 쓰면 무한 로딩처럼 보일 수 있다.

isLoading

쿼리가 처음 실행되어 데이터를 불러오는 중일 때 `true`가 된다. 

예를 들어 컴포넌트가 마운트되지마자 API 요청이 시작된다면, 그 순간부터 데이터가 도착하기 전까지 `isLoading`이 `true`로 유지된다. 즉, 처음 데이터를 가져오는 중인지 구분할 때 사용하는 상태이다.

 

isFetching

실제로 네트워크 요청이 발생했을 때 `true`가 된다. 

처음 로딩뿐만 아니라, refetch나 새로고침 같은 백그라운드 요청도 포함한다는 것이 특징이다.

즉, 이미 데이터가 화면에 표시되고 있어도, 백그라운드에서 데이터를 다시 불러오면 그동안 `isFetching` 값은 `true`가 된다.