당신의 React 코드는 if (loading)을 사용하나요?

const { data, error, isLoading } = useQuery(GET_TASK);
 
if (isLoading) return <LoadingSpinner />;
if (error) return <ErrorMessage error={error} />;
 
return <TaskEditor task={data.task} />;

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  // ...에러 상태, fetch 로직...
 
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error...</div>;
  
  return <Profile user={user} />;
}

function UserProfile({ userId }) {
  const user = useUser(userId); // 그냥 'user' 데이터를 원해!
  return <Profile user={user} />;
}

// TanStack Query (구 React Query) 예시
import { Suspense } from 'react';
import { useSuspenseQuery } from '@tanstack/react-query';
import { ErrorBoundary } from 'react-error-boundary';
 
function UserProfile() {
  // useSuspenseQuery는 로딩 시 자동으로 Suspense를 발동시킨다.
  const { data: user } = useSuspenseQuery({ queryKey: ['user'], queryFn: fetchUser });
  return <Profile user={user} />;
}
 
function App() {
  return (
    <ErrorBoundary fallback={<p> Something went wrong</p>}>
      <Suspense fallback={<p>Loading profile...</p>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  )
}

// React 19+
import { use, Suspense } from 'react';
 
function UserProfile() {
  // `use` Hook에 Promise를 전달하면, 알아서 Suspense를 발동시킨다.
  const user = use(fetchUser());
  return <Profile user={user} />;
}
 
// App 컴포넌트는 위와 동일하게 사용

// app/page.js (Server Component)
import { Suspense } from 'react';
import { PostFeed, Weather } from './components';
 
export default function Page() {
  return (
    <section>
      <h1>My Page</h1>
      <Suspense fallback={<p>Loading weather...</p>}>
        {/* Weather 컴포넌트는 데이터를 서버에서 기다린다. */}
        <Weather />
      </Suspense>
      <Suspense fallback={<p>Loading posts...</p>}>
        {/* PostFeed 컴포넌트 역시 서버에서 데이터를 기다린다. */}
        <PostFeed />
      </Suspense>
    </section>
  );
}
 
// components.js
export async function Weather() {
  const weather = await fetch('...'); // 오래 걸리는 API
  return <div>Today's weather: {weather}</div>;
}
 
export async function PostFeed() {
  const posts = await db.posts.findMany(); // DB 쿼리
  return <div>{/* ... */}</div>;
}

class ErrorBoundary extends React.Component {
  state = { hasError: false };
 
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
 
  componentDidCatch(error, errorInfo) {
    logErrorToService(error, errorInfo); // Sentry 등에 에러 로깅
  }
 
  render() {
    if (this.state.hasError) {
      return this.props.fallback; // 에러 발생 시 보여줄 UI
    }
    return this.props.children;
  }
}

// 기존의 코드
function TaskList() {
  const { data, isLoading, isError } = useQuery({ queryKey: ['tasks'], queryFn: getTasks });
  
  if (isLoading) return <TaskListSkeleton />;
  if (isError) return <TaskListError />;
  
  // ...성공 UI
}
 
// Suspense와 함께
function TaskList() {
  // `useSuspenseQuery` 훅을 사용하면 끝!
  const { data } = useSuspenseQuery({ queryKey: ['tasks'], queryFn: getTasks });
  
  // 컴포넌트는 오직 '성공 케이스'만 다루면 된다.
  return (
    <div>
      {data.map(task => <TaskItem key={task.id} task={task} />)}
    </div>
  );
}
 
// 사용처
<ErrorBoundary fallback={<TaskListError />}>
  <Suspense fallback={<TaskListSkeleton />}>
    <TaskList />
  </Suspense>
</ErrorBoundary>

// 사용
import { useSuspenseQuery } from '@apollo/client';
 
function TaskList() {
  const { data } = useSuspenseQuery(GET_TASKS);
  
  return (
    <div>
      {data.tasks.map(task => <TaskItem key={task.id} task={task} />)}
    </div>
  );
}

import useSWR from 'swr';
 
// SWR은 데이터를 어떻게 가져올지에 대한 함수(fetcher)를 필요로 한다.
const fetcher = (url) => fetch(url).then((res) => res.json());
 
function UserProfile() {
  const { data } = useSWR('/api/user', fetcher, { suspense: true });
 
  // JSX는 반드시 태그로 감싸져야 한다.
  return <div>Hello, {data.name}</div>;
}

import { ErrorBoundary } from 'react-error-boundary';
 
<ErrorBoundary
  fallbackRender={({ error, resetErrorBoundary }) => (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )}
>
  <MyComponent />
</ErrorBoundary>

const [isPending, startTransition] = useTransition();
 
const handleNextPage = () => {
  startTransition(() => {
    setCurrentPage(prev => prev + 1); // 이 업데이트가 Suspense를 유발
  });
};
 
// isPending으로 로딩 인디케이터를 보여줄 수 있음
{isPending && <Spinner />}