useOptimistic: useState 없이 구현하는 낙관적 업데이트

// ❌ 크리스의 수동 구현 (복잡함)
function ChatApp({ messages }) {
  // 서버 데이터와 별개로 로컬 상태를 또 관리해야 한다.
  const [optimisticMessages, setOptimisticMessages] = useState(messages);

  const sendMessage = async (text) => {
    // 1. 가짜 메시지를 먼저 리스트에 추가 (즉시 반응)
    const tempMsg = { id: Date.now(), text, sending: true };
    setOptimisticMessages((prev) => [...prev, tempMsg]);

    try {
      // 2. 서버 요청
      await api.sendMessage(text);
      // 3. 성공하면 서버에서 최신 목록을 다시 받아와 동기화 (리프레시)
    } catch (err) {
      // 4. 💥 실패하면? 아까 추가한 가짜 메시지를 찾아서 지워야 함 (Rollback)
      setOptimisticMessages((prev) => prev.filter(m => m.id !== tempMsg.id));
      alert('전송 실패!');
    }
  };

  return <MessageList messages={optimisticMessages} />;
}

const [optimisticState, addOptimistic] = useOptimistic(state, reducer);

// ChatApp.tsx
import { useOptimistic, useState } from 'react';
import { sendMessageAction } from './actions';

function ChatApp({ messages }: { messages: Message[] }) {
  // ✅ 낙관적 상태 정의
  // 평소에는 messages(서버 데이터)를 보여주다가,
  // addOptimistic이 호출되면 배열 끝에 newMessage를 붙여서 보여준다.
  const [optimisticMessages, addOptimistic] = useOptimistic(
    messages,
    (currentMessages, newMessage: string) => [
      ...currentMessages,
      { id: Date.now(), text: newMessage, sending: true }
    ]
  );

  const formAction = async (formData: FormData) => {
    const text = formData.get('message') as string;
    
    // 1. UI를 즉시 업데이트한다! (서버 응답 안 기다림)
    addOptimistic(text);

    // 2. 실제 서버 요청 (백그라운드)
    await sendMessageAction(text);
    
    // 3. 끝! 
    // 액션이 끝나면 리액트가 알아서 optimisticMessages를 
    // 최신 서버 데이터(messages)로 덮어쓴다. 롤백 코드가 필요 없다.
  };

  return (
    <section>
      <MessageList messages={optimisticMessages} />
      <form action={formAction}>
        <input name="message" />
        <button type="submit">전송</button>
      </form>
    </section>
  );
}