📚 Reference

• 공식 문서 1

📜 Chapter

useOptimistic

• useOptimistic
• useOptimistic는 낙관적 UI(Optimistic UI) 패턴을 구현하기 위해 사용하는 React 훅이다.
• 이 훅은 사용자 액션의 결과를 네트워크 요청이 완료되기도 전에 미리 화면에 반영하여, 애플리케이션이 더 빠르고 즉각적으로 반응하는 것처럼 느끼게 만든다.

낙관적 UI(Optimistic UI)

• 낙관적 UI는 "사용자 액션이 성공할 것이다"라고 미리 가정하고, 서버로부터의 응답을 기다리지 않고 즉시 UI를 업데이트하는 디자인 패턴이다.
• 예를 들어, 채팅 앱에서 메시지를 보내면, 서버로부터 "메시지가 성공적으로 전송되었다"는 응답을 받기도 전에 내 화면에 메시지가 바로 나타나는 경우가 바로 낙관적 UI의 대표적인 예이다.

역할

• useOptimistic 훅은 다음 두 가지를 반환한다.
  1. optimisticState: 사용자에게 보여줄 낙관적인 상태 값이다.
  2. addOptimistic: 낙관적 업데이트를 실행하는 함수이다.
• 사용자가 어떤 액션을 수행하면, addOptimistic 함수를 호출하여 화면을 즉시 업데이트한다.
• 그리고 백그라운드에서는 실제 네트워크 요청이 진행된다.
• 네트워크 요청이 성공하거나 실패하면, useOptimistic는 자동으로 optimisticState를 실제 데이터로 되돌린다.