React 19 Actions API · `use` 훅 · React Compiler — useEffect 보일러플레이트를 절반으로 줄이는 폼·데이터 페칭 실전 가이드

// next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
export default nextConfig;

// useTransition으로 직접 비동기 액션을 제어하는 경우
const [isPending, startTransition] = useTransition();
 
function handleUpdate() {
  startTransition(async () => {
    await updateSomething();
    // 완료 후 상태 업데이트
  });
}

// 기존 패턴 — useState 3개 + useEffect
function UserProfile({ id }: { id: string }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetchUser(id)
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [id]);
 
  if (loading) return <Spinner />;
  if (error) return <ErrorMessage />;
  return <div>{user.name}</div>;
}

// React 19 패턴 — use() + Suspense + ErrorBoundary
function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise); // Promise가 resolve될 때까지 suspend
  return <div>{user.name}</div>;
}
 
function App({ id }: { id: string }) {
  // 중요: Promise는 렌더마다 재생성되면 안 됩니다.
  // useMemo로 메모이제이션해 id가 바뀔 때만 새 Promise를 생성합니다.
  const userPromise = useMemo(() => fetchUser(id), [id]);
 
  return (
    <Suspense fallback={<Spinner />}>
      <ErrorBoundary fallback={<ErrorMessage />}>
        <UserProfile userPromise={userPromise} />
      </ErrorBoundary>
    </Suspense>
  );
}

// app/actions.ts — Server Action
'use server'
 
import { z } from 'zod';
import { revalidatePath } from 'next/cache';
import { getSession } from '@/lib/auth'; // 사용 중인 auth 라이브러리에 맞게 교체
 
const schema = z.object({
  name: z.string().min(2, '이름은 2자 이상이어야 합니다'),
});
 
type State = {
  success: boolean;
  name?: string;
  error?: string;
};
 
export async function updateUsername(
  prevState: State | null,
  formData: FormData
): Promise<State> {
  // schema.safeParse: Zod 유효성 검사 결과.
  // result.success가 false면 result.error에 오류 정보가 담깁니다.
  const result = schema.safeParse({ name: formData.get('name') });
 
  if (!result.success) {
    return { success: false, error: result.error.errors[0].message };
  }
 
  const session = await getSession(); // 세션에서 현재 사용자 ID를 가져옵니다
  await db.user.update({
    where: { id: session.userId },
    data: { name: result.data.name },
  });
 
  revalidatePath('/profile');
  return { success: true, name: result.data.name };
}

// app/profile/page.tsx — Client Component
'use client'
 
import { useActionState } from 'react';
import { useFormStatus } from 'react-dom'; // react가 아닌 react-dom에서 임포트
import { updateUsername } from '../actions';
 
// useFormStatus는 상위 <form>의 자식 컴포넌트 안에서만 동작합니다.
// SubmitButton을 별도 컴포넌트로 분리하는 이유가 바로 여기에 있습니다.
function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? '저장 중...' : '저장'}
    </button>
  );
}
 
export default function ProfileForm() {
  const [state, dispatch, isPending] = useActionState(updateUsername, null);
 
  return (
    <form action={dispatch}>
      <input
        name="name"
        defaultValue={state?.name}
        aria-invalid={!!state?.error}
      />
      {state?.error && <p role="alert">{state.error}</p>}
      {state?.success && <p>저장되었습니다!</p>}
      <SubmitButton />
    </form>
  );
}

import { useOptimistic, useState } from 'react';
 
function LikeButton({ post }: { post: Post }) {
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    post.likes,
    (currentLikes: number, increment: number) => currentLikes + increment
  );
 
  async function handleLike() {
    setErrorMessage(null);
    addOptimisticLike(1); // 즉시 UI 반영
 
    try {
      await likePost(post.id); // 서버 요청
    } catch {
      // useOptimistic은 이 액션이 완료(또는 실패)되면 자동으로 서버 값으로 롤백됩니다.
      // 자동 롤백 외에, 사용자에게 실패를 알리는 메시지를 별도로 표시하는 것이 좋습니다.
      setErrorMessage('좋아요 처리 중 오류가 발생했습니다. 다시 시도해주세요.');
    }
  }
 
  return (
    <div>
      <button onClick={handleLike} aria-label={`좋아요 ${optimisticLikes}개`}>
        ♥ {optimisticLikes}
      </button>
      {errorMessage && (
        <p role="alert" style={{ fontSize: '0.875rem', color: '#ef4444' }}>
          {errorMessage}
        </p>
      )}
    </div>
  );
}

import { createContext, use } from 'react';
 
const ThemeContext = createContext<Theme | null>(null);
 
function ThemeIcon({ showTheme }: { showTheme: boolean }) {
  // 기존 useContext라면 이 조건문 전에 훅을 호출해야 합니다.
  // use()는 조건문 안에서 호출할 수 있어, showTheme이 false일 때 Context 구독을 건너뜁니다.
  if (!showTheme) return null;
 
  const theme = use(ThemeContext);
 
  if (!theme) return null;
  return <Icon color={theme.primary} />;
}

// app/products/page.tsx — Server Component
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
import { ProductList } from './ProductList';
import { fetchProducts } from '@/lib/api';
// 서버 환경의 fetchProducts는 DB 또는 내부 서비스를 직접 호출합니다.
// 브라우저 환경과 달리 절대 URL이나 인증 헤더 처리가 필요할 수 있습니다.
 
export default async function ProductsPage() {
  const queryClient = new QueryClient();
 
  // 서버에서 미리 데이터를 가져와 queryClient에 채웁니다.
  await queryClient.prefetchQuery({
    queryKey: ['products'],
    queryFn: fetchProducts,
  });
 
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ProductList />
    </HydrationBoundary>
  );
}

// app/products/ProductList.tsx — Client Component
'use client'
 
import { useQuery } from '@tanstack/react-query';
import { fetchProducts } from '@/lib/api';
// 주의: 클라이언트에서 호출되는 fetchProducts는 브라우저 환경에서 동작하는
// HTTP 요청이어야 합니다. (baseURL, 인증 헤더 등 클라이언트 환경에 맞게 설정 필요)
 
export function ProductList() {
  // 서버에서 prefetch된 캐시를 그대로 재사용 — 첫 렌더에 추가 네트워크 요청 없음
  // 이후 staleTime이 지나거나 refetch 조건에 해당하면 클라이언트에서 갱신됩니다.
  const { data: products } = useQuery({
    queryKey: ['products'],
    queryFn: fetchProducts,
  });
 
  return (
    <ul>
      {products?.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}