useOptimistic로 즉각적인 UI 업데이트Optimistic Updates 예제입니다.
좋은 포스트네요!
도움이 되었습니다.
즉각적인 UI 반응을 경험해보세요.
첫 번째 댓글을 작성해보세요!
// 1. useOptimistic 사용
const [optimisticLikes, setOptimisticLikes] = useOptimistic(
currentLikes,
(current, increment) => current + increment
);
// 2. 액션 실행 시 즉시 UI 업데이트
const handleLike = async () => {
setOptimisticLikes(1); // 즉시 UI에 반영
try {
const result = await likePost();
if (!result.success) {
setOptimisticLikes(-1); // 실패 시 롤백
}
} catch {
setOptimisticLikes(-1); // 에러 시 롤백
}
};
// ✅ 결과:
// - 버튼 클릭 즉시 좋아요 수 증가
// - 서버 처리 완료까지 기다리지 않음
// - 실패 시 자동으로 원래 값으로 복원💡 체험해보기: 위의 좋아요 버튼을 클릭하면 즉시 숫자가 증가하고, 서버 처리가 완료되면 실제 값으로 동기화됩니다. 가끔 실패하는 경우도 체험할 수 있습니다!