⚛️ 리액트 개발 환경 세팅: CRA vs Vite

🤔 왜 '좋아요' 버튼은 즉시 빨개져야 할까요?

여러분은 인스타그램이나 페이스북에서 '좋아요'를 눌렀을 때를 기억하시나요?
버튼을 누르는 순간, 하트는 즉시 빨간색으로 변합니다.
하지만 실제로는 그 요청이 서버에 도달하고 데이터베이스에 저장되기까지 0.1초에서 수 초의 시간이 걸립니다.
만약 서버 응답이 올 때까지 버튼이 반응하지 않는다면, 사용자들은 앱이 멈췄다고 느낄 것입니다.

핵심 문제: 네트워크 속도는 우리가 통제할 수 없지만, 사용자 경험(UX)은 통제해야 합니다.
서버 응답을 기다리는 동안 발생하는 '미세한 멈칫거림'이 앱의 완성도를 떨어뜨립니다.

오늘 우리는 이 문제를 해결하는 React Query의 강력한 기능, '옵티미스틱 업데이트(Optimistic Updates)'에 대해 깊이 알아보겠습니다.
이 기술을 적용하면 여러분의 웹 애플리케이션은 마치 로컬 앱처럼 빠릿빠릿하게 느껴질 것입니다.

💡 옵티미스틱 업데이트란 무엇인가요?

이름에서 알 수 있듯이, '낙관적(Optimistic)'으로 결과를 예측하고 업데이트하는 방식입니다.
서버로 요청을 보냈을 때, "성공할 것이라 가정하고" 미리 화면(UI)을 바꿔버리는 전략이죠.

• 🔸 기존 방식: 요청 전송 → 서버 처리 대기 (로딩 스피너) → 응답 도착 → UI 업데이트
• 🔹 옵티미스틱 방식: 요청 전송 → 즉시 UI 업데이트 → (백그라운드에서 서버 처리) → 성공 시 유지 / 실패 시 롤백

이 방식은 사용자가 느끼는 체감 속도(Perceived Performance)를 획기적으로 높여줍니다.
특히 좋아요, 즐겨찾기, 할 일 체크 등 상호작용이 빈번한 기능에서 필수적입니다.

🛠️ React Query에서의 동작 원리 3단계

React Query(TanStack Query)는 이러한 패턴을 구현하기 위해 useMutation 훅 내부에 정교한 라이프사이클 옵션을 제공합니다.
크게 3가지 단계로 나누어 볼 수 있습니다.

단계 (LifeCycle)	역할 및 설명
1. onMutate	요청이 시작되는 즉시 실행됩니다. 현재 데이터를 스냅샷(백업) 찍고, UI를 새로운 값으로 강제 변경합니다.
2. onError	서버 요청이 실패했을 때 실행됩니다. onMutate에서 저장해둔 스냅샷으로 데이터를 롤백(복구)하여 오류 없는 상태로 되돌립니다.
3. onSettled	성공하든 실패하든 요청이 끝나면 실행됩니다. 서버의 최신 데이터와 동기화하기 위해 쿼리를 무효화(invalidate)하여 재요청합니다.

💻 실제 코드로 살펴보기

백문이 불여일견이죠? '할 일 목록(Todo)'에 새로운 항목을 추가하는 상황을 가정해보겠습니다.
아래 코드는 사용자가 '추가' 버튼을 누르자마자 목록에 새 항목이 보이는 마법을 구현한 것입니다.

const mutation = useMutation({
  mutationFn: newTodo => axios.post('/todos', newTodo),

  // 1. 요청 즉시 실행 (낙관적 업데이트)
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries({ queryKey: ['todos'] });
    const previousTodos = queryClient.getQueryData(['todos']);

    // UI를 미리 업데이트합니다!
    queryClient.setQueryData(['todos'], (old) => [...old, newTodo]);

    return { previousTodos }; // 스냅샷 반환
  },

  // 2. 실패 시 롤백
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context.previousTodos);
  },

  // 3. 완료 후 동기화
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] });
  }
});

이 코드를 사용하면 사용자는 네트워크 속도와 관계없이 즉각적인 반응을 경험하게 됩니다.
실패할 확률이 낮은 요청에 적용할수록 그 효과는 배가 됩니다.

---

📝 요약 및 실천 가이드

👍 장점

• 앱이 훨씬 빠르고 부드럽게 느껴짐.
• 서버 응답 대기 시간 동안 사용자가 다른 작업을 할 수 있음.
• 네이티브 앱 수준의 고품질 UX 제공.

⚠️ 주의사항

• 실패 확률이 높은 요청(결제 등)에는 사용 자제.
• 롤백 로직(onError)을 꼼꼼하게 작성해야 함.
• 데이터 정합성이 매우 중요한 기능에는 신중하게 적용.

React Query의 옵티미스틱 업데이트는 단순히 기술적인 기교가 아닙니다.
사용자에게 "당신의 요청은 이미 처리되었습니다"라는 신뢰를 주는 UX 디자인의 일부입니다.
오늘 당장 여러분의 프로젝트에 있는 '좋아요' 버튼부터 이 기술을 적용해보는 건 어떨까요?

🚀 지금 바로 실습해보세요!
React Query 공식 문서를 켜고, `useMutation` 훅을 작성해보세요. 작은 변화가 큰 차이를 만듭니다.