useOptimistic

 

 

useOptimistic 훅은 낙관적 업데이트(Optimistic UI)를 구현할 수 있도록 도와주는 훅입니다. 이 훅을 사용하면 UI에서 비동기 작업이 진행될 때 일시적으로 예상 결과를 UI에 미리 반영하여 사용자 경험을 개선할 수 있습니다.

사용법

useOptimistic 훅은 두 개의 매개변수를 받습니다:

1. initialState: 훅이 호출되기 전의 초기 상태입니다.
2. updateFn: 실제 비동기 작업의 결과를 받아와서 어떻게 상태를 업데이트할지를 정의하는 함수입니다.

const [optimisticState, setOptimisticState] = useOptimistic(initialState, updateFn);

 

 

 

반환값

useOptimistic 훅은 두 개의 값으로 구성된 배열을 반환합니다:

1. optimisticState: 업데이트된 낙관적 상태입니다. 비동기 작업이 실행되기 전에 이 상태가 UI에 즉시 반영됩니다.
2. setOptimisticState: 낙관적 업데이트를 트리거하는 함수입니다. 이 함수를 호출하면 내부적으로 updateFn이 실행되어 상태가 업데이트됩니다.

 

동작 방식

1. 낙관적 업데이트(UI 업데이트): setOptimisticState 함수를 호출하여 상태를 업데이트할 때, 훅은 이 업데이트를 즉시 optimisticState에 반영합니다. 이는 사용자가 실제 비동기 작업의 결과를 기다리지 않고도 UI에서 예상된 변화를 바로 볼 수 있도록 합니다.
2. 실제 업데이트 함수: updateFn은 두 개의 인자를 받습니다:
   • 첫 번째 인자 (currentState): useOptimistic 훅이 호출되기 이전의 상태입니다.
   • 두 번째 인자 (payload): 실제 비동기 작업의 결과값입니다.
   updateFn 함수는 이 두 인자를 이용하여 새로운 상태를 계산하고 반환해야 합니다. 반환된 상태는 setOptimisticState를 통해 optimisticState에 업데이트됩니다.
3. 실제 비동기 작업 실패 시 롤백: 비동기 작업이 실패할 경우, 일반적으로 try-catch 블록에서 에러를 처리하고 이전 상태로 롤백할 수 있습니다. 이 과정에서 setOptimisticState를 사용하여 UI를 이전 상태로 되돌릴 수 있습니다.

 

 

예시

 

import { useOptimistic } from 'react';

interface Post {
  id: number;
  title: string;
  body: string;
}

const initialPost: Post = {
  id: 1,
  title: 'Sample Post',
  body: 'This is a sample post.',
};

const PostDetail = () => {
  const [post, setPost] = useOptimistic(initialPost, (currentState, payload: Post) => {
    // updateFn: 실제 비동기 작업의 결과를 받아 상태를 업데이트하는 함수
    return {
      ...currentState,
      title: payload.title,
      body: payload.body,
    };
  });

  const fetchPostFromAPI = async () => {
    try {
      setPost(undefined); // 낙관적 업데이트 시작
      const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${post.id}`);
      if (!response.ok) {
        throw new Error('Failed to fetch post');
      }
      const postData = await response.json();
      setPost(postData); // 실제 API 응답으로 상태 업데이트
    } catch (error) {
      console.error('Failed to fetch post:', error);
      setPost(post); // 실패 시 이전 상태로 롤백
    }
  };

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={fetchPostFromAPI}>Refresh Post</button>
    </div>
  );
};

export default PostDetail;

 

 

 

이 예제에서는 useOptimistic 훅을 사용하여 글을 가져오는 동안 UI에서 예상된 업데이트를 반영합니다. fetchPostFromAPI 함수에서는 먼저 setPost(undefined)를 호출하여 UI에 낙관적인 업데이트를 시작하고, 비동기적으로 실제 데이터를 가져와서 setPost(postData)를 통해 UI를 업데이트합니다. 실패 시에는 setPost(post)를 호출하여 이전 상태로 롤백합니다.

이와 같이 useOptimistic 훅을 사용하면 사용자 경험을 개선하고 UI를 더 반응적으로 만들 수 있습니다.