[react-query] 좋아요 기능 최적화하기

좋아요는 많이 사용되는 기능이기 때문에, 성능 최적화를 위해 로직을 분리하는것이 더 효율적이라고 판단하여 이에 대한 작업을 수행하였다.

 

게시글과 댓글, 대댓글에 좋아요가 가능하도록 구현되어 있고, 좋아요에 대한 collection 또한 분리해두고, post와 comment는 likeCount 필드를 가지고 있어서, 좋아요가 변경될때마다 쿼리를 하지 않도록 하였다.

 

 

📎 DB collection 참고

https://s-organization-335.gitbook.io/meongnang

Firebase DB 설계 | 성능 최적화 & 기술적 의사결정

 

Optimistic update

Optimistic update는 서버에서 데이터가 업데이트 되기 전에 사용자에게 먼저 변경된 내용을 보여주는 기술로 사용자 ui에서 즉시 응답을보여주고 백그라운드에서 서버로 요청을 전송하기 때문에, 빠른 응답이 가능하다.

👉🏻 많은 interaction이 발생하는 좋아요 기능에 optimistic update를 적용

👉🏻 이전보다 빠른 응답 속도로 사용자 경험을 향상시키고, 사용자가 중복되는 같은 액션을 여러번 시도하지 않도록 방지할 수 있는 장점들을 가질수 있다.

 

 

export const useCreatePostLikeReaction = (postId: string, userId: string) => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: () => createPostLikeReaction(postId, userId),
    onMutate: async () => {
      const previousLikeCount = queryClient.getQueryData([
        POST_LIKE_COUNT,
        postId,
      ]);

      queryClient.setQueryData<number | undefined>(
        [POST_LIKE_COUNT, postId],
        (old) => (old ?? 0) + 1
      );

      return { previousLikeCount };
    },
    onError: (_err, _variables, context) => {
      if (context?.previousLikeCount) {
        queryClient.setQueryData(
          [POST_LIKE_COUNT, postId],
          context.previousLikeCount
        );
      }
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: [POST_LIKE_STATUS, postId, userId],
      });
      queryClient.invalidateQueries({ queryKey: [POST_LIKE_COUNT, postId] });
      queryClient.invalidateQueries({ queryKey: [POST_LIKED_BY_USER, userId] });
    },
  });
};

 

 

❗️문제점

불필요한 렌더링 발생 문제

 

메인페이지(전체 게시글 확인가능)에서도, 좋아요가 가능하도록 구현하다보니, 메인에서 전체 postCard를 가져오는 쿼리키는 [POST]로 지정되어있고, 그러다보니, 메인페이지에서 좋아요 토글을 할때 post 데이터를 업데이트해서 likeCount를 얻으려고 한다면, 상세페이지에서는 [Post,PostId]만 invalidate해도되지만, 메인페이지에서 좋아요 토글을 통한 업데이트를 위해선 [POST] invalidate하다보니, 좋아요 토글할때마다 스크롤한 영역까지 모든 postCard가 리렌더링이 발생한다….

 

 

✨ 해결방법

 

👉🏻 likeCount API 분리

postData의 likeCount를 LikeToggleButton에 props를 내려주는 방식이 아닌 post의 likeCount필드값을 얻어오는 getPostLikeCount를 분리해주었다.

 

export const getPostLikeCount = async (postId: string) => {
  const postRef = doc(db, "posts", postId);
  const docSnap = await getDoc(postRef);
  if (docSnap.exists()) {
    const postData = docSnap.data() as postDto;
    return postData.likeCount;
  } else {
    throw new Error("포스트를 찾을 수 없습니다.");
  }
};

 

👉🏻 좋아요 버튼만 리렌더링 발생