낙관적 업데이트 (Optimistic Update)

낙관적 업데이트는 서버의 응답을 기다리지 않고, 사용자 인터페이스(UI)를 먼저 업데이트하는 기술이다. 이를 통해 사용자는 즉각적인 피드백을 받을 수 있어 애플리케이션이 더 빠르고 반응성이 높게 느껴진다. 이 기술은 서버 요청이 성공할 것이라는 가정 아래 동작하며, 실패 시 롤백(rollback)을 통해 상태를 복구한다.

---

낙관적 업데이트의 동작 원리

1. 사용자 요청 발생: 사용자가 특정 작업(예: 좋아요 버튼 클릭)을 수행한다.
2. UI 즉시 업데이트: 서버 응답을 기다리지 않고, UI를 변경하여 작업 결과를 즉시 반영한다.
3. 서버 요청 처리: 백엔드에서 요청을 처리하고 결과를 반환한다.
4. 결과 확인 및 처리:
   • 성공 시: UI 상태를 유지한다.
   • 실패 시: 이전 상태로 롤백하거나 오류 메시지를 표시한다.

---

장점

• 즉각적인 피드백 제공: 사용자가 서버 응답 지연 없이 작업 결과를 바로 확인할 수 있다.
• 사용자 경험(UX) 개선: 네트워크 상태가 불안정하거나 서버 응답 시간이 길어도 애플리케이션의 반응성이 유지된다.
• 지연 시간 감소: UI가 서버와 독립적으로 동작하므로, 사용자는 대기 시간을 거의 느끼지 못한다.

---

단점 및 주의점

1. 데이터 불일치 가능성:
   • 서버 요청이 실패하면 UI와 실제 데이터 간 불일치가 발생할 수 있다.
2. 복잡한 오류 처리 로직 필요:
   • 실패 시 롤백 및 사용자 알림 등의 추가 로직이 필요하다.
3. 적용 대상 제한:
   • 결제나 민감한 데이터와 같은 중요한 작업에는 적합하지 않을 수 있다. 실패 시 사용자 신뢰도에 부정적인 영향을 미칠 수 있기 때문이다.

---

적용 사례

낙관적 업데이트는 다음과 같은 상황에서 유용하게 사용된다:

• 소셜 미디어: 좋아요, 댓글 작성, 게시물 저장 등.
• 전자 상거래: 장바구니 추가, 상품 즐겨찾기 등.
• 실시간 협업 도구: 문서 편집, 작업 상태 변경 등.

반면, 결제 시스템이나 금융 거래처럼 데이터 무결성이 중요한 경우에는 비관적 업데이트(Pessimistic Update) 방식을 사용하는 것이 더 적합하다.

---

구현 예시 (React Query 활용)

const { mutate } = useMutation(updateData, {
    onMutate: async (newData) => {
        // 이전 상태 저장
        const previousData = queryClient.getQueryData(['dataKey']);
        // 낙관적 업데이트
        queryClient.setQueryData(['dataKey'], (old) => ({
            ...old,
            ...newData,
        }));
        return { previousData };
    },
    onError: (err, newData, context) => {
        // 롤백
        queryClient.setQueryData(['dataKey'], context.previousData);
    },
    onSettled: () => {
        // 최종 데이터 동기화
        queryClient.invalidateQueries(['dataKey']);
    },
});

---

낙관적 업데이트 적용 시 고려사항

1. 성공 가능성 높은 작업에 적용:
   • 요청 성공률이 높은 경우에 적합하다.
2. 롤백 로직 설계:
   • 실패 시 상태를 복구할 수 있는 메커니즘을 마련해야 한다.
3. 사용자 알림 제공:
   • 오류 발생 시 사용자에게 명확한 피드백을 제공해야 한다.

---

낙관적 업데이트는 사용자 경험을 크게 개선할 수 있는 강력한 도구이다. 하지만 모든 상황에 적합하지는 않으므로, 적용 여부를 신중히 판단하고 적절한 오류 처리 로직을 설계해야 한다.