[메이플스토리 Open API] React Query로 API 요청 최적화하기

이전 메이플스토리 Open API를 활용한 랭킹 통계 웹페이지 만들기(1)에서 메이플스토리 Open API를 활용하여 랭킹 통계 웹페이지를 개발하던 중, fetch 함수의 중복을 줄이기 위해 공통 함수를 생성했었습니다. 하지만 이후 요청이 많아지면서 429 Too Many Requests 오류가 발생했습니다.

 

Open API 문서를 확인해보니, 요청 횟수 초과(1000건 제한)로 인해 오류가 발생한 것이었습니다. 실제 통계에서도 999건 이상의 요청이 확인되었고, 최적화가 필요하다고 생각했습니다.

😭 문제 원인

페이지를 새로고침할 때마다 모든 데이터에 대해 fetch 요청이 발생하면서, 제한된 API 호출 수를 초과하게 된 것입니다. 이를 해결하기 위해 react-query를 활용해 데이터를 캐싱하고 요청 횟수를 줄이기로 했습니다.

---

☑️ 기존 코드

기존 코드에서는 하나의 컴포넌트에서 여러 개의 fetch 요청을 처리하고 있었습니다.

const [overallRanking, setOverallRanking] = useState<OverallRanking[]>([]);
const [unionRanking, setUnionRanking] = useState<UnionRanking[]>([]);
const [guildRanking, setGuildRanking] = useState<GuildRanking[]>([]);
const [dojangRanking, setDojangRanking] = useState<DojangRanking[]>([]);
const [seedRanking, setSeedRanking] = useState<SeedRanking[]>([]);
const [archievementRanking, setArchievementRanking] = useState<
  ArchievementRanking[]
>([]);

const overallUrl = `${BASE_URL}/ranking/overall?date=${todayDate}&page=1`;
const unionUrl = `${BASE_URL}/ranking/union?date=${todayDate}&page=1`;
const guildUrl = `${BASE_URL}/ranking/guild?date=${todayDate}&ranking_type=0`;
const dojangUrl = `${BASE_URL}/ranking/dojang?date=${todayDate}&difficulty=0&page=1`;
const seedUrl = `${BASE_URL}/ranking/theseed?date=${todayDate}&page=1`;
const archievementUrl = `${BASE_URL}/ranking/achievement?date=${todayDate}&page=1`;

useEffect(() => {
  fetchRanking<OverallRanking>(overallUrl, setOverallRanking);
  fetchRanking<UnionRanking>(unionUrl, setUnionRanking);
  fetchRanking<GuildRanking>(guildUrl, setGuildRanking);
  fetchRanking<DojangRanking>(dojangUrl, setDojangRanking);
  fetchRanking<SeedRanking>(seedUrl, setSeedRanking);
  fetchRanking<ArchievementRanking>(archievementUrl, setArchievementRanking);
}, [overallUrl, unionUrl, guildUrl, dojangUrl, seedUrl, archievementUrl]);

---

☑️ react-query를 활용한 최적화

✔️ QueryClient 생성

QueryClient를 생성해 기본 옵션을 설정했습니다.

import { QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5분 동안 캐싱 유지
      refetchOnWindowFocus: false, // 창 포커스 시 리패치 비활성화
      retry: 0, // 요청 실패 시 재시도 비활성화
    },
  },
});

export default queryClient;

✔️ 공통 데이터 fetch 함수 생성

각 랭킹 데이터를 호출하기 위한 공통 함수를 작성했습니다.

export const fetchRankingData = async <T>(url: string): Promise<T[]> => {
  const response = await fetch(url, {
    headers: {
      "x-nxopen-api-key": API_KEY || "",
    },
  });
  if (!response.ok) throw new Error(`Error: ${response.status}`);
  const data = await response.json();
  console.log(data);
  return data.ranking;
};

✔️ useQuery로 데이터 캐싱

react-query의 useQuery를 사용해 데이터 요청과 캐싱을 간소화했습니다.

const { data: overallRanking } = useQuery({
  queryKey: ["ranking", "overall"],
  queryFn: () => fetchRankingData<OverallRanking>(overallUrl),
});

const { data: unionRanking } = useQuery({
  queryKey: ["ranking", "unionRanking"],
  queryFn: () => fetchRankingData<UnionRanking>(unionUrl),
});

const { data: guildRanking } = useQuery({
  queryKey: ["ranking", "guildRanking"],
  queryFn: () => fetchRankingData<GuildRanking>(guildUrl),
});

const { data: dojangRanking } = useQuery({
  queryKey: ["ranking", "dojangRanking"],
  queryFn: () => fetchRankingData<DojangRanking>(dojangUrl),
});

const { data: seedRanking } = useQuery({
  queryKey: ["ranking", "seedRanking"],
  queryFn: () => fetchRankingData<SeedRanking>(seedUrl),
});

const { data: archievementRanking } = useQuery({
  queryKey: ["ranking", "archievementRanking"],
  queryFn: () => fetchRankingData<ArchievementRanking>(archievementUrl),
});

---

☑️ 결과 및 개선

최적화 이후 요청 횟수를 다시 확인해본 결과, 총 137건으로 크게 감소했습니다. 🥳

react-query를 활용하면 데이터 캐싱뿐 아니라 리렌더링 최적화 및 요청 횟수 관리에도 유리합니다. 다음 포스팅에서는 useQuery 로 사용한 부분을 hook 으로 만들어 코드 간소화를 할 예정입니다. 많관부 🙏