로딩 상태 처리를 안전하게 바꾸기

비동기 데이터를 다루다 보면 isLoading, isError, data 같은 플래그가 컴포넌트마다 조금씩 다른 방식으로 굴러다닌다. 그러다 로딩 중인데 빈 화면이 잠깐 보이거나, 에러인데 이전 데이터가 그대로 남는 식의 어색한 상태가 생긴다. 이걸 정리한 과정을 적는다.

상태를 세 갈래로 명확히 나눈다

가장 먼저 한 건 화면이 가질 수 있는 상태를 로딩 / 에러 / 데이터 셋으로 분명히 나누고, 각각 무엇을 그릴지 정하는 것이었다.

if (isLoading) return <Skeleton />;
if (error) return <ErrorBox onRetry={refetch} />;
return <List items={data} />;

순서가 중요하다. 에러 체크보다 데이터 렌더가 먼저 오면, 에러 상태에서 낡은 data를 그리게 된다.

깜빡임을 막는다

데이터가 빨리 오면 스켈레톤이 한 프레임 깜빡이고 사라진다. 나는 로딩이 일정 시간(예: 200ms) 이상 걸릴 때만 스켈레톤을 보여주는 식으로 처리했다. 짧게 끝나는 요청은 그냥 이전 화면을 유지하는 게 덜 거슬린다.

재요청 시 이전 데이터 유지

필터를 바꿔 다시 불러올 때 화면이 빈 스켈레톤으로 돌아가면 답답하다. react-query의 placeholderData(이전 keepPreviousData)처럼 이전 데이터를 잠깐 유지하면 전환이 훨씬 매끄럽다. 로딩 처리는 결국 "어떤 순간에 무엇을 그릴지"를 빠짐없이 정하는 일이었다.