React 로딩 상태 표시가 꼬일 때 확인 순서

React에서 로딩 상태를 관리할 때, 데이터가 로드되었는데 로딩 표시가 계속 나오거나, 반대로 아직 로딩 중인데 콘텐츠가 보이는 경우가 있다. 보통 상태 업데이트 순서나 렌더링 조건에서 비롯된 문제다.

문제의 상황 파악

먼저 정확히 어떤 증상이 나는지 정리한다. 로딩 스피너가 안 사라지는 건지, 아니면 너무 빨리 사라지는 건지, 아무것도 표시 안 되는 건지 구분해야 한다.

이벤트 흐름 확인하기

Console에서 로그를 남겨서 상태 변화를 추적한다.

const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState(null);

useEffect(() => {
  console.log('Request started, isLoading:', isLoading);
  fetchData().then((result) => {
    console.log('Data received:', result);
    setData(result);
    setIsLoading(false);
    console.log('isLoading set to false');
  });
}, []);

브라우저 콘솔에서 어떤 순서로 로그가 출력되는지 보면 상태 변화의 순서를 파악할 수 있다.

렌더링 조건 확인

로딩 표시와 콘텐츠 표시 조건이 겹칠 수 없는지 확인한다.

// 잘못된 예: 둘 다 표시될 수 있음
return (
  <>
    {isLoading && <Spinner />}
    {data && <Content data={data} />}
  </>
);

// 올바른 예: 하나만 표시됨
return (
  <>
    {isLoading ? <Spinner /> : data ? <Content data={data} /> : <Empty />}
  </>
);

모바일에서 테스트

모바일 환경에서 느린 네트워크를 시뮬레이션해서 로딩 상태가 제대로 나타나는지 확인한다.

npm run build
# 브라우저 개발자 도구 → Network 탭에서 Slow 3G 선택

느린 로딩 중에도 로딩 표시가 나타나는지, 데이터가 오면 사라지는지 본다.

상태 이름 확인

변수 이름이 명확한지 확인한다. loading, isLoading, loaded, isLoaded 같은 비슷한 이름들이 섞여있으면 실수하기 쉽다.

변수 이름을 명확하게 정하고, 한 번에 한 개만 true/false로 관리하는 게 좋다.

고쳐봤는데 실패했을 때

1. useEffect의 의존성 배열 확인 (필요한 값이 모두 포함되어 있는지)
2. 비동기 작업이 여러 번 실행되는 건 아닌지 (fetch 중복 호출)
3. 에러 상태를 별도로 처리해야 하지 않은지 (에러일 때도 로딩 표시 안 함)

로딩 상태를 명확히 정의하고 한 가지씩 수정하면서 테스트하는 게 가장 효율적이다. 다음에 비슷한 문제가 생기면 이 확인 순서를 다시 따르면 빠르게 해결할 수 있다.