Custom hook이란?

• 컴포넌트내 특정한 로직을 뽑아내어 재사용하기 위해 사용
• 항상 최상위 코드에서 호출해야함.
• 네이밍은 무조건 use로 시작한다 (ex: useInput, useSearch ~)
• 코드의 독립성/재사용성이 올라감.

🤔 일반 컴포넌트에 query를 사용할경우

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('/api/data');
  return response.json();
};

const App = () => {
  const { data, error, isLoading } = useQuery('test', fetchData);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

• 컴포넌트에 fetch함수가 직접적으로 노출됨.
• 쿼리키 관리가 용이 하지 않다.
• 만약 한 컴포넌트에 useQeury가 여러개 사용된다면?? 각 fetch되는 data마다 네이밍을 다르게 해주어야 할 것이며 코드 중복이 일어날 가능성이 많다.

✅ 커스텀 훅으로 분리

// hooks/query/useGetChatListQuery.tsx

import axios from 'axios';
import { useInfiniteQuery } from '@tanstack/react-query';
import { ChatListDataType } from '@/types/chatting/chatDataType';

const fetchAPI = async (page: number): Promise<ChatListDataType[]> => {
  try {
    const list = await axios.get(`/chats?size=10&page=${page}`);
    return list.data;
  } catch (error) {
    console.log(error);
    throw error;
  }
};

const useGetChatListQuery = () => {
  const {
    data: chatList,
    isLoading: chatListIsLoading,
    fetchNextPage: chatListFetchNextPage,
    hasNextPage: chatListhasNextPage
  } = useInfiniteQuery({
    queryKey: ['chatList'],
    initialPageParam: 1,
    queryFn: ({ pageParam = 1 }) => fetchAPI(pageParam),
    getNextPageParam: (lastPage, allPage) => {
      const nextpage = allPage.length + 1;
      return lastPage.length === 0 ? null : nextpage;
    }
  });

  return {
    chatList,
    chatListIsLoading,
    chatListFetchNextPage,
    chatListhasNextPage
  };
};

export default useGetChatListQuery;

// components/chatList.tsx
import useGetChatListQuery from '@/hooks/query/chat/useGetChatListQuery';

const ChatList = () => {
  const { chatList, chatListFetchNextPage } = useGetChatListQuery();
  
	return (
    <ul className="px-5 [&>*:last-child]:border-0">
      {chatList?.pages.map(page =>
        page.map(list => (
          <ChatItem
            key={list.chatRoomId}
            chatRoomId={list.chatRoomId}
            friendsName={list.friendsName}
            scheduleTitle={list.scheduleTitle}
          />
        ))
      )}
    </ul>
  );
};

export default ChatList;

• 쿼리를 독립적으로 분리해줌으로써 쿼리키와 api 함수의 관리가 용이하다
• fetch된 data의 네이밍을 직접 정의 후 리턴.
• 컴포넌트내에 useQuery를 사용했을때 보다 중복 코드도 없어지며 해당 로직의 변경이나 접근이 쉽다
• 가독성 향상