📖 TIL - TanStack Query의 낙관적 업데이트 기법 이해하기

📌 낙관적 업데이트가 뭐야?

탄스택 쿼리에서 낙관적 업데이트라는 기능을 제공해주는데, 이게 정말 유용하다. 간단히 말하면 서버에서 응답이 오기 전에 미리 UI를 업데이트해버리는 거다. 서버에서 값을 받아오는 딜레이를 기다리지 않고 바로 화면에 반영해주는 것.

🤔 왜 이런 기능이 필요할까?

예를 들어 인스타그램에서 좋아요 버튼을 눌렀다고 생각해보자. 서버 응답이 2초 정도 걸린다면, 사용자는 좋아요를 눌렀는데도 하트가 바로 빨간색으로 안 변하고 2초 동안 기다려야 한다. 엄청 답답할 거다.

낙관적 업데이트는 이 문제를 해결해준다. 좋아요 버튼을 누르면 서버 응답을 기다리지 않고 즉시 하트를 빨간색으로 바꿔준다. 그럼 사용자는 "오! 잘 눌렸네!" 하고 바로 알 수 있다.

물론 이렇게 미리 UI를 바꿔놨는데 서버에서 에러가 나면? 그땐 다시 원래대로 돌려놔야 한다. 이걸 롤백이라고 하는데, 낙관적 업데이트를 쓸 때는 이 롤백 로직도 함께 구현해줘야 한다.

💡 TanStack Query에서는 어떻게 구현하지?

탄스택 쿼리에서는 낙관적 업데이트를 구현하는 두 가지 방법을 제공한다:

1. UI로 직접 구현하기

이건 더 간단한 방법이다. 특별한 코드 없이 그냥 컴포넌트에서 조건부 렌더링을 사용한다.

const addTodoMutation = useMutation({
  mutationFn: (newTodo) => axios.post("/api/todos", { text: newTodo }),
  onSettled: async () => {
    return await queryClient.invalidateQueries({ queryKey: ["todos"] });
  },
});

// 이렇게 상태를 가져와서
const { isPending, variables, mutate, isError } = addTodoMutation;

// JSX에서 이렇게 사용
<ul>
  {todos.map((todo) => (
    <li key={todo.id}>{todo.text}</li>
  ))}
  
  {/* 요청 중일 때 임시로 보여주기 */}
  {isPending && <li style={{ opacity: 0.5 }}>{variables}</li>}
  
  {/* 에러 났을 때 */}
  {isError && (
    <li style={{ color: "red" }}>
      {variables}
      <button onClick={() => mutate(variables)}>다시 시도</button>
    </li>
  )}
</ul>

요청이 진행 중일 때(isPending이 true일 때) 임시 항목을 흐릿하게 보여주고, 에러가 나면 빨간색으로 표시하면서 다시 시도 버튼을 보여주는 식이다.

2. 캐시를 직접 조작하기

이 방법은 조금 더 복잡한데, onMutate 함수를 사용한다. onMutate는 API가 호출되기 전에 실행되는 함수다. 여기서 캐시를 미리 업데이트해놓고, 문제가 생기면 롤백할 수 있게 준비한다.

const queryClient = useQueryClient();

useMutation({
  mutationFn: addTodo,
  
  // 여기가 핵심! API 호출 전에 실행됨
  onMutate: async (newTodo) => {
    // 다른 쿼리 요청 다 취소시켜서 꼬이지 않게
    await queryClient.cancelQueries({ queryKey: ["todos"] });
    
    // 현재 상태 백업해두기 (롤백용)
    const previousTodos = queryClient.getQueryData(["todos"]);
    
    // 캐시 바로 업데이트
    queryClient.setQueryData(["todos"], (old) => [...old, newTodo]);
    
    // 백업한 데이터 반환
    return { previousTodos };
  },
  
  // 에러 나면 이전 상태로 복구
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(["todos"], context.previousTodos);
  },
  
  // 요청 끝나면 무조건 새로고침
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ["todos"] });
  },
});

🤷‍♂️ 어떤 방법을 써야 할까?

두 방법 중에 뭘 선택할지는 상황에 따라 다르다:

UI 방식이 좋을 때:

• 낙관적 업데이트가 필요한 곳이 한 컴포넌트뿐일 때
• 간단하게 구현하고 싶을 때
• 복잡한 롤백 로직이 필요 없을 때

캐시 방식이 좋을 때:

• 여러 컴포넌트에서 같은 데이터를 보여줄 때
• 데이터 구조가 복잡할 때
• 확실한 롤백이 중요할 때

💪 사용할 때 주의할 점

1. 아무 때나 쓰지 말자: 중요한 데이터나 실패 확률이 높은 작업엔 낙관적 업데이트 안 쓰는 게 좋다.

2. 항상 롤백 준비하기: 서버에서 에러가 나면 이전 상태로 되돌릴 수 있어야 한다.

3. 에러 났을 때 사용자에게 알려주기: 업데이트 실패했을 때 사용자가 알 수 있게 해주자.

👍 요약

낙관적 업데이트는 서버 응답을 기다리지 않고 UI를 먼저 업데이트해서 사용자 경험을 개선하는 기법이다. 탄스택 쿼리에서는 UI 방식과 캐시 방식 두 가지로 구현할 수 있는데, 상황에 맞게 선택해서 쓰면 된다. 다만 롤백 로직은 꼭 구현해야 하고, 모든 상황에 낙관적 업데이트를 적용하는 건 위험할 수 있으니 적절히 사용하자.