로딩 및 오류 상태 처리

비동기 데이터의 세 가지 상태

로딩 사용자 인터페이스

if (loading) {
  return (
    <div className="loading-state">
      <Spinner size="lg" />
      <p>Loading users...</p>
    </div>
  );
}

오류 사용자 인터페이스

if (error) {
  return (
    <div className="error-state">
      <p>Failed to load data: {error}</p>
      <button onClick={() => setRetry(n => n + 1)}>Try Again</button>
    </div>
  );
}

다시 시도 메커니즘

const [retry, setRetry] = useState(0);

useEffect(() => {
  // fetch...
}, [userId, retry]); // retry in deps triggers re-fetch

<button onClick={() => setRetry(n => n + 1)}>Retry</button>

로딩 상태 모범 사례

낙관적 업데이트

// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
  await deleteItem(id);
} catch (err) {
  setItems(prevItems); // revert on failure
  showError('Delete failed. Changes reverted.');
}

렌더링 오류를 위한 오류 경계

HTTP 오류 매핑

function mapStatusToMessage(status: number): string {
  if (status === 401) return 'Please sign in to continue';
  if (status === 403) return 'You don\'t have permission to do this';
  if (status === 404) return 'This item no longer exists';
  if (status === 429) return 'Too many requests. Please wait a moment';
  if (status >= 500) return 'Server error. We\'re looking into it';
  return 'Something went wrong';
}

복잡한 데이터 가져오기 상태에 useReducer 사용하기

type FetchState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; message: string };

const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });

Suspense — 미래의 방식

네트워크 오류와 서버 오류 비교

빠른 확인

복습: 로딩 및 오류 상태