- Next.js 15의
useOptimistic
훅을 이용한 낙관적 업데이트: UI 응답성 향상을 위한 기술 🚀 - 서버 응답 대기 없이 즉각적인 UI 업데이트 제공: 사용자 경험 개선 ✨
useOptimistic
훅의 두 매개변수: 초기 상태와 낙관적 업데이트 함수 🔄- 낙관적 업데이트 함수는 현재 상태와 추가 인자(예: 삭제할 상품 ID)를 받아 새로운 상태 반환 ➡️
useOptimistic
훅의 반환값: 낙관적 상태와 업데이트 함수 🔄- 서버 컴포넌트에서 훅 사용 불가 문제 해결을 위한 데이터 획득 및 변경 로직 분리: 클라이언트 컴포넌트 생성 🗂️
- 클라이언트 컴포넌트에서 낙관적 업데이트 구현 및 서버 컴포넌트에서 데이터 가져오기 🤝
- 삭제 버튼 클릭 시 즉각적인 상품 삭제 표시 후 백그라운드에서 실제 삭제 작업 수행: 매끄러운 사용자 경험 제공 💨