[Next] useOptimistic

useOptimistic이란

 

사용자 인터페이스(UI)를 서버 응답 전에 미리 업데이트하여, 애플리케이션이 더 빠르고 반응성이 좋게 느껴지도록 만드는 React 훅

 

useOptimistic은 임시적인 "낙관적(optimistic)" 상태를 만들어 관리합니다.

1. 액션 시작: 사용자가 버튼을 클릭하여 서버 액션을 호출합니다.
2. 낙관적 상태 업데이트: 서버 액션이 실행되기 전에 useOptimistic 훅이 제공하는 함수를 호출하여 UI의 상태를 즉시 변경합니다.
3. 서버 통신: 실제 서버 액션이 백그라운드에서 실행됩니다.
4. 최종 상태 적용: 서버 액션이 성공적으로 완료되면, Next.js는 최신 서버 상태로 UI를 다시 렌더링합니다. 이때 임시적인 낙관적 상태는 사라지고 실제 데이터가 화면에 표시됩니다.
5. 실패 시 복구: 만약 서버 액션이 실패하면, UI는 원래의 상태로 되돌아갑니다.

 

JavaScript

 

// `app/comments/page.tsx`
"use client";

import { useState } from "react";
import { useOptimistic } from "react";
import { addComment } from "./actions"; // 서버 액션 import

export default function Page() {
  const [inputValue, setInputValue] = useState("");

  // useOptimistic 훅 사용
  const [optimisticComments, addOptimistic] = useOptimistic(
    [], // 초기 상태 (여기서는 댓글 목록 배열)
    (currentComments, newComment) => [ // updater 함수: 현재 상태와 새로운 값으로 낙관적 상태를 반환
      ...currentComments,
      { text: newComment, sending: true }, // 임시로 'sending' 속성 추가
    ]
  );

  return (
    <div>
      {optimisticComments.map((comment, index) => (
        <div key={index}>
          {comment.text}
          {comment.sending && <span>... 전송 중</span>}
        </div>
      ))}
      <form onSubmit={async (e) => {
        e.preventDefault();
        const commentText = inputValue;

        addOptimistic(commentText); // ✅ 서버 응답 전에 UI를 즉시 업데이트

        await addComment(commentText); // 서버 액션 호출 (비동기)

        setInputValue("");
      }}>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <button type="submit">댓글 추가</button>
      </form>
    </div>
  );
}

useOptimistic은 사용자에게 즉각적인 피드백을 제공함으로써 애플리케이션의 반응성을 극대화하는 강력한 도구입니다.