2관문. Server Actions & Optimistic UI

관문 2 / 7

Server Action으로 폼을 처리하고 useOptimistic으로 서버 응답 전에 UI를 먼저 업데이트하라.

📖 이론 비급

Server Actions & Optimistic UI

Server Action은 서버에서 실행되는 함수를 클라이언트에서 직접 호출할 수 있게 한다. 'use server' 지시어로 선언하며, 폼의 action이나 이벤트 핸들러에서 호출한다.

useOptimistic: 서버 응답을 기다리지 않고 UI를 즉시 업데이트한다. 서버 응답이 오면 실제 상태로 교체되며, 실패 시 자동으로 롤백된다. 체감 속도를 0ms로 만드는 핵심 패턴이다.

⚔️ 수련 코드

'use client';
import { useOptimistic, useTransition } from 'react';

// Server Action (별도 파일 또는 'use server' 함수)
async function addTodo(text) {
  'use server';
  // 실제로는 DB에 저장
  await new Promise(r => setTimeout(r, 1000)); // DB 지연 시뮬레이션
  return { id: Date.now(), text, done: false };
}

export default function TodoApp({ initialTodos }) {
  const [todos, setTodos] = React.useState(initialTodos ?? []);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );

  async function handleSubmit(formData) {
    const text = formData.get('todo');
    // TODO: addOptimisticTodo로 즉시 UI 업데이트 후
    // addTodo Server Action 호출하라
    const newTodo = await addTodo(text);
    setTodos(prev => [...prev, newTodo]);
  }

  return (
    <div>
      <form action={handleSubmit}>
        <input name="todo" placeholder="할 일 입력" />
        <button type="submit">추가</button>
      </form>
      <ul>{optimisticTodos.map(t => <li key={t.id}>{t.text}</li>)}</ul>
    </div>
  );
}

Open Sandbox