느린 로딩, 이제 안녕! 사용자 경험을 비약적으로 개선하는 프론트엔드 최적화 기법
🚀'로딩 중...' 화면에 지친 당신에게
혹시 온라인 쇼핑몰에서 "좋아요" 버튼을 눌렀을 때, 혹은 게시판에 댓글을
작성했을 때 잠시 화면이 멈추거나 '로딩 중...' 이라는 메시지를 보며
답답함을 느끼신 적이 있습니까?
네트워크 통신은 필연적으로 지연 시간(Latency)을 발생시키며, 이 짧은 순간의
기다림은 사용자 경험(UX)을 크게 저해하는 주범이 됩니다.
이러한 문제를 해결하기 위해 프론트엔드 개발자들이 사용하는 마법 같은
기술이 바로
낙관적 업데이트(Optimistic Updates) 입니다.
이 글은 낙관적 업데이트의 핵심 개념을 일반 사용자도
이해할 수 있도록 쉽고 명확하게 설명하고, 초보 개발자도 강력한 기능을
활용할 수 있도록 React Query를 이용한 구체적인 구현
방법을 단계별로 안내합니다.
💡낙관적 업데이트(Optimistic Updates)란 무엇인가?
낙관적(Optimistic)이라는 단어의 뜻처럼, 이 기법은 사용자
액션의 결과를 미리 긍정적으로 예측하고 화면에 반영하는
방식입니다.
쉽게 말해, 서버에 데이터를 저장하라는 요청을 보내고 그 응답을 기다리는
대신,
"요청이 성공할 것이다"라고 가정하고 사용자
인터페이스(UI)를 즉시 업데이트하는 것입니다.
✨ 사용자 경험(UX) 혁신 원리
전통적인 방식은 사용자가 버튼을 클릭하면 → 로딩 상태 표시 → 서버 통신 시작
→ 서버 응답 성공 → UI 업데이트 순서로 진행됩니다. 이 과정에서 네트워크
지연이 발생합니다.
반면, 낙관적 업데이트는 사용자가 버튼을 클릭하면 → UI
즉시 업데이트 (마치 성공한 것처럼) → 서버 통신 시작 →
서버 응답 순서로 진행됩니다.
사용자는 통신이 진행되는 동안에도 이미 결과가 반영된 화면을 보게 되므로,
체감 속도는 압도적으로 빨라집니다.
* 전통적 방식: 은행 ATM에 돈을 넣고, 입금 완료 문자 올 때까지 기다렸다가 잔액을 확인하는 것.
* 낙관적 방식: 돈을 넣자마자 ATM 화면의 잔액이 업데이트되고, 나중에 문제가 생기면 (아주 드물게) 취소되는 것.
⚠️ 실패 시 대처: 낙관주의의 그림자
물론 낙관적 가정이 항상 맞는 것은 아닙니다. 네트워크
오류, 서버 문제, 유효성 검사 실패 등으로 인해 서버 요청이 실패할 수도
있습니다.
이러한 실패 상황(Rollback) 발생 시, 낙관적 업데이트를
통해 미리 변경했던 UI를
원래 상태로 되돌리는(Rollback) 과정이 필수적입니다.
이 복구 과정은 보통 사용자에게 오류 메시지를 보여주며 동시에 UI를 초기
상태로 되돌려야 하므로, 이 과정을 얼마나 매끄럽게 처리하는지가
낙관적 업데이트 구현의 핵심입니다.
🛠️React Query를 활용한 낙관적 업데이트 구현
React 환경에서 데이터 페칭과 상태 관리를 효율적으로 도와주는 라이브러리인
React Query (TanStack Query)는 낙관적 업데이트를 매우
간단하고 안정적으로 구현할 수 있는 강력한 기능을 제공합니다.
React Query는 내부적으로 캐시 관리, 재시도(Retry), 동기화 로직을
담당해주어 개발자가 복잡한 상태 관리 코드를 작성할 필요가 없게 합니다.
1. useMutation으로 서버 통신 준비
데이터 변경(생성, 수정, 삭제)을 담당하는 요청은
useMutation 훅을 사용합니다.
이 훅은 onMutate, onError,
onSuccess 등의 콜백 함수를 통해 낙관적 업데이트의 핵심 로직을
주입할 수 있는 구조를 제공합니다.
2. onMutate를 통한 낙관적 업데이트
onMutate 콜백은
실제 API 요청이 시작되기 직전에 실행됩니다.
이 함수 내에서 다음의 두 가지 핵심 작업을 수행합니다.
- 이전 데이터 저장(Rollback Context): 실패 시 복구를 위해 현재 캐시된 데이터를 저장합니다.
-
캐시 데이터 낙관적으로 변경:
queryClient.setQueryData를 사용하여 서버 응답을 기다리지 않고 로컬 캐시 데이터를 즉시 새로운 상태(사용자가 원하는 변경 결과)로 변경합니다.
3. onError를 통한 실패 시 복구 (Rollback)
만약 서버 통신이 실패하면 onError 콜백이 실행됩니다. 이때
이전에 저장해 둔 데이터를 사용하여 캐시를
원래 상태로 되돌립니다.
queryClient.setQueryData를 다시 사용하여 실패 전의 상태로
복구하는 것이 낙관적 업데이트의 안전장치입니다.
onError에서 반드시
context.previousData (onMutate에서 저장한
데이터)를 사용하여 데이터를 복구해야 합니다. 그렇지 않으면 사용자는 실패한
변경 사항을 계속 보게 되어 혼란을 겪습니다.4. onSuccess를 통한 최종 동기화
서버 요청이 성공하면 onSuccess가 실행됩니다.
이때는 이미 낙관적으로 업데이트된 상태이므로, 캐시를 다시 변경할 필요는
없지만, 서버로부터 받은 최신 데이터로 최종적으로 캐시를
동기화(invalidate)하는 것이 좋습니다.
queryClient.invalidateQueries를 사용하여 해당 쿼리 키를
가진 데이터를 백그라운드에서 재요청(Refetch)하도록
지시합니다.✅사용자 경험을 완성하는 개발 습관
🚀 핵심 요약
- 1. 낙관적 업데이트란: 서버 통신 결과가 성공할 것이라 낙관적으로 가정하고 UI를 즉시 업데이트하여 사용자에게 지연 없는 경험을 제공하는 기법입니다.
-
2. React Query 활용:
useMutation의onMutate를 사용하여 즉각적인 캐시 변경을 수행하고,onError에서 이전 데이터로 롤백함으로써 안정성을 확보합니다. - 3. 안정성 확보: 낙관적 업데이트의 성공은 실패 시 복구(Rollback)를 얼마나 완벽하게 구현하느냐에 달려 있습니다.
낙관적 업데이트는 단순히 화면을 빨리 보여주는 것을 넘어,
사용자의 인터랙션에 대한 즉각적인 피드백을 제공하여
애플리케이션에 대한 신뢰도를 높이는 핵심 기술입니다.
React Query의 useMutation 기능을
숙달하여, 사용자에게 쾌적하고 반응성 높은 웹 경험을 선사하는 개발자가
되시길 바랍니다.
댓글 쓰기