misung.dev

들어가기 전에

스노로즈 글에 댓글을 작성하거나 삭제할 때 화면이 전체 하얗게 깜빡이는 이슈가 있어, 이슈를 해결한 과정을 정리했습니다.

이슈 확인

댓글을 작성하거나 삭제하면 화면이 전체적으로 하얗게 깜빡인 뒤, 게시글과 댓글 목록이 다시 나타나는 현상이 발생했어요. 깜빡이는 시간은 길지 않지만, 화면 전환이 발생하는 듯한 느낌이 들어 부자연스러웠어요.

화면 깜빡임 이슈

원인 분석

코드를 확인해보니, useComment() 훅 내부에서 댓글 작성/삭제 성공 시 아래 함수를 호출하고 있었어요.

// 기존 코드 일부
onSuccess: () => {
  invalidUserInfoQuery(); // 전역 userInfo 쿼리 무효화
}

이 invalidUserInfoQuery()는 전역 쿼리인 [QUERY_KEY.userInfo]를 무효화(invalidateQueries)하면서 즉시 refetch를 유도하고 있었습니다.
userInfo 쿼리가 Suspense 아래에 있었기 때문에, refetch가 발생하면 해당 영역이 로딩 상태로 전환되며 fallback UI(흰 화면) 가 잠깐 나타났어요.

해결 방법

useComment() 훅 내에 전역 쿼리를 invalidate하는 대신, 부분적인 캐시 업데이트와 필요한 경우에만 리패치하는 방식으로 개선했습니다.

기존 방식

onSuccess: () => {
  invalidUserInfoQuery(); // 전역 무효화 → Suspense fallback 발생 → 화면 깜빡임
}

개선 방식

수정된 코드에서는 전역 무효화 대신 다음과 같은 방식으로 필요한 데이터만 부분적으로 캐시 갱신하고, 정확한 시점에만 제한적으로 쿼리를 다시 무효화해요.

// 포인트 변경이 있을 경우 userInfo 캐시를 직접 수정
const updateUserPoints = (pointDifference) => {
  queryClient.setQueryData([QUERY_KEY.userInfo], (prev) => ({
    ...prev,
    points: prev.points + pointDifference,
  }));
};
 
// 혹시 모를 데이터 불일치에 대비해, 비활성 상태일 때만 리패치
const invalidateUserInfo = () => {
  queryClient.invalidateQueries({
    queryKey: [QUERY_KEY.userInfo],
    refetchType: 'inactive',
  });
};

또한, 댓글 목록과 댓글 수는 아래 예시처럼 직접 필요한 부분만 갱신해주도록 수정했어요.

const deleteComment = useMutation({
  // mutationKey, mutationFn 생략
  onSuccess: (deletedComment) => {
    const { id, pointDifference } = deletedComment;
 
    // 포인트 반영
    updateUserPoints(pointDifference);
 
    // 댓글 목록 캐시 갱신
    updateCommentCache((comment) =>
      deleteIfTargetComment({
        comment,
        targetId: id,
      })
    );
 
    // 댓글 수 갱신
    updateCommentCountCache({ type: COMMENT_ACTION_TYPE.delete });
 
    // userInfo 쿼리, 비활성 상태에서만 리패치
    invalidateUserInfo();
  },
  onError,
  onSettled,
});

화면 깜빡임 이슈 해결

결과적으로

userInfo 쿼리를 전역 무효화하지 않고 필요한 데이터만 캐시로 갱신해, Suspense fallback이 발생하지 않게 되었고, 댓글 등록/삭제 결과가 즉시 UI에 반영되어 깜빡임 없이 부드럽게 동작하게 되었어요.

그 결과 전반적인 UX가 훨씬 매끄럽고 자연스러워졌어요 🙌