리액트 숙련 주차. (7)

TanStack Query: QueryFunctionContext와 Optimistic Update

프론트엔드 개발을 하면서 서버 상태 관리는 필수적인 과제다.

 

이를 효과적으로 관리하기 위해 많이 사용하는 라이브러리가 바로 TanStack Query다. 오늘은 TanStack Query에서 중요한 두 가지 개념, QueryFunctionContext와 Optimistic Update에 대해 배운 내용을 정리해 본다.

1. QueryFunctionContext란?

QueryFunctionContext는 TanStack Query에서 queryFn 실행 시 전달되는 컨텍스트 객체다. 이 객체를 활용하면 쿼리를 더욱 유연하게 작성할 수 있다.

QueryFunctionContext 주요 속성

• queryKey
  현재 쿼리를 고유하게 식별하는 키.
  여러 데이터를 관리할 때, 이 키를 기준으로 쿼리를 구분한다.
• meta
  쿼리 실행 시 전달된 메타데이터. 주로 추가적인 정보를 전달하거나 로직을 커스터마이징하는 데 사용된다.

 

• signal
  쿼리를 취소할 때 사용하는 AbortSignal 객체.
  네트워크 요청을 취소할 수 있어, 사용자가 쿼리를 중단했을 때 불필요한 리소스 낭비를 막아준다.
• pageParam
  페이지네이션 시 사용되는 추가 파라미터.
  무한 스크롤이나 페이지네이션 기능을 구현할 때 유용하다.

2. Optimistic Update란?

Optimistic Update(낙관적 업데이트)는 서버에서 응답이 오기 전에 UI를 먼저 업데이트하는 전략이다.
이 방식은 사용자 경험(UX)을 크게 향상시킬 수 있지만, 서버 요청이 실패했을 경우에는 UI를 다시 원상복구해야 한다.

Optimistic Update의 동작 방식

1. UI를 즉시 업데이트하여 사용자에게 빠른 피드백 제공.
2. 서버 요청을 비동기로 처리.
3. 요청 성공 시 UI를 유지, 실패 시 롤백(Revert) 처리.

Optimistic Update의 활용 사례

• 좋아요, 찜하기, 팔로우 등 빠른 피드백이 필요한 인터랙션.
• 댓글 추가, 삭제 등 실시간 반영이 요구되는 기능.

배운 점

1. QueryFunctionContext의 유용성
   queryKey, signal, pageParam 등을 활용하면 쿼리를 더욱 세밀하게 제어할 수 있다.
2. Optimistic Update의 강력함
   서버 응답을 기다리지 않고 즉각적인 UI 업데이트가 가능해 사용자 경험을 개선할 수 있다.
   하지만 실패 시 롤백 처리를 꼼꼼히 구현해야 한다는 점도 중요하다.

결론

TanStack Query는 서버 상태 관리에서 강력한 도구이며, QueryFunctionContext와 Optimistic Update는 이를 활용한 유연한 데이터 관리의 핵심이다.

앞으로의 프로젝트에서 이 개념들을 적절히 활용한다면 더 나은 사용자 경험을 제공할 수 있을 것이다.