[TIL] 아웃소싱 프로젝트 - React Query 적용기

hisung-ah·2023년 12월 7일
0

Today

  • 댓글 CRUD React Query 적용

완성 코드

// React Query 댓글 조회
const { data: comments, isLoading } = useQuery('comments', getComments);

// React Query 댓글 추가
const addMutation = useMutation(addToCommentDatabase, {
  onSuccess: () => {
    queryClient.invalidateQueries('comments');
  }
});
// React Query 댓글 수정
const updateCommentMutation = useMutation((data) => updatingComment(data.uid, { comment: data.comment }), {
  onSuccess: () => {
    queryClient.invalidateQueries('comments');
  }
});

// React Query 댓글 삭제
const deleteMutation = useMutation(deleteComment, {
  onSuccess: () => {
    queryClient.invalidateQueries('comments');
  }
});

// 댓글 추가
const addCommentHandler = (e) => {
  e.preventDefault();
  if (!userInfo) {
    return alert('로그인을 필요합니다!');
  }
  const newComment = {
    id: props.id,
    comment: commentRef.current.value,
    email: userInfo.email,
    date: getFormattedDate(new Date())
  };
  addMutation.mutate(newComment);
  commentRef.current.value = '';
};

// 댓글 수정 상태 토글
const editToggleHandler = (data) => {
  setEditing((prev) => ({ ...prev, [data.uid]: true }));
};

const updateCommentHandler = (data) => {
  updateCommentMutation.mutate({
    uid: data.uid,
    comment: editCommentRef.current.value,
    isEditing: false
  });
  setEditing((prev) => ({ ...prev, [data.uid]: false }));
};

// 삭제
const deleteCommentHandler = (uid) => deleteMutation.mutate(uid);

파이어베이스 SDK를 사용했고 평소 같았으면 리덕스로 관리했겠지만 향후 계속 사용할 서버 상태 관리 라이브러이고, 손에 익고 눈에 익어야 하니까 React Query를 적용시켰다.

사실 적용시키면서 좀 잘못 적용한 거 같은 느낌도 든다(?)

그래서 향후 계획은 apicustom hookcomponents 형식으로 적용할 예정이다.

✏️ 회고

컴포넌트를 깔끔하게 만들어보자!
커스텀 훅 많은 이용을 하자!

profile
프론트엔드 엔지니어로 거듭나기 프로젝트

0개의 댓글