Todo 리스트 프로젝트를 하며..

FullCalendar

Todo 리스트를 하며 일주일 안에 완성도 있는 캘린더를 구현하지 못할 것 같아
아쉽지만 FullCalendar 라이브러리를 사용하였습니다.

처음부터 라이브러리에 버금가는 기능을 구현하려 했으면 더 힘들었겠지만
지정된 형식을 따라가야 하는 라이브러리 사용법을 익히는 것도 만만치 않게 고되었습니다.

코드 작성할 때는 귀찮고 힘든 typescript이지만
이번 라이브러리를 사용하면서 그 힘을 더욱 절실히 느끼게 되었습니다.

tanstack

프로젝트에서 @tanstack/react-query를 사용하면서
이전의 query 코드에서 코드 스타일을 바꾸었다.

이전 프로젝트에서의 useQuery 사용

• 느낀 장점 컴포넌트내에서 로직이 위치하여 파악이 쉬웠다.
• 느낀 단점 C, R, U, D가 일어나는 각 컴포넌트에서 반복되는 코드가 보인다.

export const SomeComponent = () => {
  const queryClient = useQueryClient();
  
  // import된 db.json POST 로직
  const postComment = async newComment => {
    await axios.post(`${process.env.REACT_APP_SERVER_URL}/comments`, newComment);
  };
  
  const postCommentMutation = useMutation(postComment, {
    onSuccess: () => queryClient.invalidateQueries("comments")
  });
  
  return (
    ... 생략
    )
}

이번 프로젝트에서 custom hook 으로 CRUD 로직을 만들어 주었다.

• CRUD가 한 곳에 모여있어 앞선 방법과 다른 방면으로 유지 보수가 쉽게 느껴졌다.

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useCurrentUser, useMenuStore, useScheduleStore } from "store";
import { deleteData, getData, getFilterData, patchData, postData } from "supabase/schedule";

export const useSchedule = () => {
  // 반복되는 코드
  const queryClient = useQueryClient();
  // 휴먼 에러를 줄여 줄 것 같아 사용하였다.
  const queryKey = ["schedule"];

  // 현재 유저 email state
  const { currentUserEmail: email } = useCurrentUser();

  // 선택된 카테고리 state
  const { menu } = useMenuStore();
  // GET Query
  const response = useQuery({
    queryKey: ["schedule", menu, email],
    queryFn: () => getData({ menu, email })
  });

  // 현재 클릭한 일정 ID state
  const { targetId } = useScheduleStore();
  // GET Query
  const selectedData = useQuery({
    queryKey: ["schedule", targetId],
    queryFn: () => getFilterData(targetId)
  });

  // POST Query
  const postMutation = useMutation(postData, {
    onSuccess: () => queryClient.invalidateQueries({ queryKey })
  });

  // PATCH Query
  const patchMutation = useMutation(patchData, {
    onSuccess: () => queryClient.invalidateQueries({ queryKey })
  });

  // DELETE Query
  const deleteMutation = useMutation(deleteData, {
    onSuccess: () => queryClient.invalidateQueries({ queryKey })
  });

  return { response, selectedData, postMutation, patchMutation, deleteMutation };
};

• 컴포넌트

export const SomeComponent = () => {
  const { response, patchMutation } = useSchedule();

  const { data: scheduleData, isError, isLoading } = response;
  
  const onSubmitHandler = () => {
  ...somelogin
  patchMutation.mutate({ updateValue, id })
  }
  
  return (
    ... 생략
    )
}