●[Main-Project] Refactor: 3~4일차

● 3~4일차 작업 분배

❍ Comment.tsx~ infinite Query 훅처리 (준석)

• query Invalidation, query mutation hook 으로 처리하기 (Comment.tsx)
• FeedComment, Comment 로직 통일하기 (분리의 필요성을 못 느끼겠어요)

❍ useQuery hook처리 (다은)

• 중복적으로 쓰이는 useQuery hook으로 처리하기

 

생각보다, 2일차때 작업했던것들이 시간이 오래걸려 주말까지 넘어가 작업을 이어했습니다. 오늘 8월 14일(월)요일에 useQuery hook처리를 한 이후에 준석님과 함께 1차목표를 달성하였습니다. :)

오늘은 서로 주말동안 작업한 코드리뷰와 함께, 2차목표를 세우는 작업이 주였습니다.

 

● useQuery hook으로 처리하기

사실 useQuery를 hook으로 처리하면서 많은 고민이 있었습니다.. useQuery 제네릭을 어떻게 넘겨줘야하지?에 대한 .. 고민이.. 저의 1차 고민이었습니다. useQuery는 대부분 query 키, 쿼리함수만을 넘겨주고 있는데, 이에 따른 제네릭을 어떻게 설정해줘야하지에 대한 고민이 있었습니다.

먼저 아래와 같이 저는 hook처리를 하려고 했었는데요, 제네릭으로 들어가는 Feed만 분기처리를 통해 각각 다른 제네릭이 들어가게 수정을 보고 싶었습니다.

export default function useGetQuery<Feed>({ key, url, accessToken }: QueryProp) {
  const { data, isLoading, isSuccess, isError } = useQuery<Feed>({
    queryKey: key,
    queryFn: () => getServerDataWithJwt(url, accessToken as string),
  });
  return { data, isLoading, isSuccess, isError };
}

하지만 저는 계속 고민을하다 방법을 찾지 못했었는데, 준석님과 상의끝에 아래 코드로 변환시킬 수 있었습니다.

export default function useGetQuery<T>({ key, url, accessToken }: QueryProp) {
  const { data, isLoading, isSuccess, isError } = useQuery<T>({
    queryKey: key,
    queryFn: () => getServerDataWithJwt(url, accessToken as string),
  });
  return { data, isLoading, isSuccess, isError };
}

그래서 공통 query hook으로 분리할 수 있었다..!

이외에도 너무 길었던 query 함수 로직을 분리하는 식으로 로직분리를 할 수 있었습니다.

import { useQuery } from '@tanstack/react-query';
import QueryProp from './queryProp';
import { getServerDataWithJwt } from '@/api/queryfn';
import { UserInfo } from '@/types/userType';

interface MypageQueryProp extends QueryProp {
  successFn?: React.Dispatch<React.SetStateAction<string>>;
  booleanFn?: React.Dispatch<React.SetStateAction<boolean>>;
  parameter?: 'address' | 'image' | 'guest';
}

export default function useMypageQuery({
  key,
  url,
  accessToken,
  successFn,
  booleanFn,
  parameter,
}: MypageQueryProp) {
  const { data, isLoading, isSuccess, isError } = useQuery<UserInfo>({
    queryKey: key ? key : ['myPage'],
    queryFn: () => getServerDataWithJwt(url, accessToken as string),
    onSuccess: data => {
      if (successFn) {
        if (parameter === 'address') successFn(data.address);
        else if (parameter === 'image') successFn(data.memberInfo.imageURL);
      }
      if (booleanFn) booleanFn(data.guestFollow);
    },
    enabled: !!accessToken,
  });

  return { data, isLoading, isSuccess, isError };
}

뿌-듯

 

● 5일차 작업 분배

내일 저는 mutation hook처리를 해야하는데요, 오늘 미리 작업을 하려고 합니다.

뮤테이션 Hook처리를 하기 전에, 저는 고민이 있었습니다.

• mutation.fn으로 빼놓은 함수기반으로 hook처리를 할지
• patch, post 등 메서드 기반으로 hook처리를 할지
• 그냥 많이 로직이 겹치는 부분을 기반으로 hook처리를 할지

그걸 오늘 고민해보면서 미리조금 작업을 쳐볼까합니다..