[Chore] 서버 상태관리 라이브러리 변경

- 본래 react-query 라이브러리 사용하였으나 @tanstack/react-query-devtools 사용을 위해 @tanstack/react-query 로 변경 * react-query-devtools 및 브라우저 개발자 모드 네트워크 탭을 확인해봤을 때 동일한 useQuery를 통해 동일한 queryKey를 부여한 API 요청도 최초 호출 후 캐싱된 데이터를 활용하는 것이 아닌, 동일한 데이터 중복 호출 중인 것으로 보여짐. 관련하여 1차적으로 기능 구현 마친 후 불필요한 호출 방지 위해 원인 파악 및 리팩토링 예정 Issues #17
codestates-seb · Sep 8, 2023 · 775ce0f · 775ce0f
1 parent 834c2e6
commit 775ce0f
Show file tree

Hide file tree

Showing 7 changed files with 437 additions and 497 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,13 +11,14 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.5",
+    "@tanstack/react-query": "^4.35.0",
+    "@tanstack/react-query-devtools": "^4.35.0",
     "axios": "^1.5.0",
     "boxicons": "^2.1.4",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-query": "^3.39.3",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
     "styled-components": "^6.0.7"

diff --git a/client/src/hooks/useGetCompanyList.ts b/client/src/hooks/useGetCompanyList.ts
@@ -1,10 +1,10 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
 const useGetCompanyList = () => {
-  const { data, isLoading, error } = useQuery("companyList", getCompanyList, {});
+  const { data, isLoading, error } = useQuery(["companyList"], getCompanyList, {});
 
-  return { companyList: data, isLoading, error };
+  return { companyList: data, compnayListLoading: isLoading, companyListError: error };
 };
 
 export default useGetCompanyList;
@@ -16,3 +16,28 @@ const getCompanyList = async () => {
 
   return companyList;
 };
+
+/*
+비동기처리에 특화되어있다 -> ?
+서버에서 데이터를 받아와서 -> react 화면을 그리거나, 어떤 로직을 처리
+-> 비동기적으로 이루어진다 
+
+1.server데이터 바아오기 (axios) -> 통신 -> 서버와 상호작용한다 -> delay 
+2.받아온 데이터로 작업 처리 => undefined 
+
+해결하기 위해서
+async await
+promise then
+// 비동기 처리의 핵심은
+1. 서버 데이터를 완전히 받아온 다음에 -> 이걸 써야하고 => then / async await
+ - 서버 데이터 받아오기
+ - 로딩 인디케이터 true
+ - 서버 데이터 다 받아왔다면
+ - 로딩 인디케이터 false 만들기 
+2. 서버 데이틀 받아오는 과정 중에는 -> 어떤 loading indicator 처리를 보통 하고 (ux 요소를 위해서) => loading 처리
+3. if error 가 발생했ㅇ르 때는 이를 처리할 코드가 필요하다 
+-> try/catch문을 써서 두가지 케이슬 ㄹ분기한다 
+
+
+
+*/
diff --git a/client/src/hooks/useGetKospiChart.ts b/client/src/hooks/useGetKospiChart.ts
@@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
 const useGetKospiChart = () => {
   const [kospiData, setKospiData] = useState([]);
 
-  const { data, isLoading, error } = useQuery("kospi", getKospiData, {});
+  const { data, isLoading, error } = useQuery(["kospi"], getKospiData, {});
 
   if (isLoading) {
     console.log("데이터 로딩중");

diff --git a/client/src/hooks/useGetStockData.ts b/client/src/hooks/useGetStockData.ts
@@ -1,18 +1,16 @@
 import { useState, useEffect } from "react";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
 const useGetStockData = (companyId: number) => {
   const [autoRefetch, setAutoRefetch] = useState(false);
 
   // 시간대 (timeZone) 별로 queryKey를 다르게 설정해서, 서버 데이터가 동일할 때는 캐싱된 데이터 활용하고 서버 데이터가 갱신됐을 때는 새롭게 받아옴 (서버 데이터 30분마다 갱신)
   const currentTime = new Date();
-  const [month, day, hour, minute] = [currentTime.getMonth(), currentTime.getDay(), currentTime.getHours(), currentTime.getMinutes()];
+  const [month, day, hour, minute] = [currentTime.getMonth(), currentTime.getDate(), currentTime.getHours(), currentTime.getMinutes()];
   const timeZone = minute === 0 || minute === 30 ? "30 or 60" : 0 < minute && minute < 30 ? "1~29" : "31~59";
   const queryKey = `${month}월 ${day}일 ${hour}시 ${timeZone}`;
 
-  console.log(queryKey);
-
   // 현재 시각이 30분, 정각이 아닌 경우 남은 시간 계산하여 checkTime 함수 다시 실행
   useEffect(() => {
     if (minute === 0 || minute === 30) {
@@ -36,12 +34,12 @@ const useGetStockData = (companyId: number) => {
     }
   }, []);
 
-  const { data, isLoading, error, refetch } = useQuery(`chartData${companyId} ${queryKey}`, () => getChartData(companyId), {
+  const { data, isLoading, error, refetch } = useQuery([`chartData${companyId} ${queryKey}`], () => getChartData(companyId), {
     enabled: true,
     refetchInterval: autoRefetch && 60000 * 10, // 정각 혹은 30분에 맞춰서 10분 마다 데이터 리패칭
-    onSuccess: () => {
+    onSuccess: (cachedData) => {
       console.log(new Date());
-      console.log(data);
+      console.log("Data successfully loaded:", cachedData);
     },
   });
 

diff --git a/client/src/hooks/useGetStockInfo.ts b/client/src/hooks/useGetStockInfo.ts
@@ -1,13 +1,13 @@
 import { useState, useEffect } from "react";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
 const useGetStockInfo = (companyId: number) => {
   const [autoRefetch, setAutoRefetch] = useState(false);
 
   // 시간대 (timeZone) 별로 queryKey를 다르게 설정해서, 서버 데이터가 동일할 때는 캐싱된 데이터 활용하고 서버 데이터가 갱신됐을 때는 새롭게 받아옴 (서버 데이터 30분마다 갱신)
   const currentTime = new Date();
-  const [month, day, hour, minute] = [currentTime.getMonth(), currentTime.getDay(), currentTime.getHours, currentTime.getMinutes()];
+  const [month, day, hour, minute] = [currentTime.getMonth(), currentTime.getDate(), currentTime.getHours(), currentTime.getMinutes()];
   const timeZone = minute === 0 || minute === 30 ? "30 or 60" : 0 < minute && minute < 30 ? "1~29" : "31~59";
   const queryKey = `${month}월 ${day}일 ${hour}시 ${timeZone}`;
 
@@ -34,12 +34,12 @@ const useGetStockInfo = (companyId: number) => {
     }
   }, []);
 
-  const { data, isLoading, error, refetch } = useQuery(`stockInfo${companyId} ${queryKey}}`, () => getStockInfo(companyId), {
+  const { data, isLoading, error, refetch } = useQuery([`stockInfo${companyId} ${queryKey}}`], () => getStockInfo(companyId), {
     enabled: true,
     refetchInterval: autoRefetch && 60000 * 10, // 정각 혹은 30분에 맞춰서 10분 마다 데이터 리패칭
-    onSuccess: () => {
+    onSuccess: (cachedData) => {
       console.log(new Date());
-      console.log(data);
+      console.log("Data successfully loaded:", cachedData);
     },
   });
 

diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
-import { QueryClientProvider, QueryClient } from "react-query";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Provider } from "react-redux";
 import store from "./store/config.ts";
 
@@ -13,6 +14,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
       <Provider store={store}>
         <App />
       </Provider>
+      <ReactQueryDevtools />
     </QueryClientProvider>
   </React.StrictMode>
 );