[Step2.3] hippo: TanStack Query 적용하기

02-state-management-tools/2.3-TanStack Query/README.md

@@ -0,0 +1,53 @@
+# 02-3. 서버상태관리 - TanStack Query
+
+💡해당 미션은 **여러 사용자가 하나의 서버를 공유하고, 식당 목록이 주기적으로 업데이트되는 환경**을 가정하여 진행합니다.
+
+## 🎯 요구사항
+
+- TanStack Query를 사용해 서버 상태를 클라이언트 상태와 분리하고, 효율적인 데이터 캐싱과 요청 관리를 구현해 보세요.
+  - 쿼리 및 뮤테이션 설정은 명확한 이유가 있다면 자유롭게 변경해도 좋습니다.
+- TanStack Query를 **왜** 사용하는지, 서버 상태와 클라이언트 상태를 분리하였을때 어떤 점이 달랐는지, 또 trade-off가 있는지 적어주세요.
+  - 기술적인 것도 좋고 개발자의 경험 측면에서도 좋습니다.
+- TanStack Query Devtools를 이용하여 Query의 변화와 Mutation의 발생을 확인해보세요.
+- (선택) 뮤테이션 로직에 낙관적 업데이트(Optimistic Update)를 적용해 보고 어떤 상황에서 낙관적 업데이트가 효과적인지, 그리고 주의해야 할 점은 무엇인지 적어주세요.
+  - Browser Throttling 기능을 활용하여 네트워크 속도를 느리게 설정한 뒤 낙관적 업데이트가 실제로 어떻게 동작하는지 확인해 보세요.
+
+### 😗구현 예시
+
+- 컴포넌트의 이름이나 구조를 정한 이유가 명확해야하며 타인에게 설명할 수 있어야합니다.
+- 아래는 main.jsx의 설정 모습입니다.
+
+```javascript
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById("root")).render(
+  <QueryClientProvider client={queryClient}>
+    <App />
+  </QueryClientProvider>
+);
+```
+
+## ✅ 키워드
+
+- props drilling
+- 서버 상태관리
+  - TanStack Query
+  - QueryClient
+  - Query Key
+  - useQuery
+  - useMutation
+  - Optimistic Update
+
+## 🧙‍♀️ 진행 가이드
+
+- 진행시간 : 4시간 내에 완료하는 것을 목표로 합니다.
+
+## 🔗 참고 문서
+
+- [TanStack Query](https://tanstack.com/query/latest/docs/framework/react/overview)
+- [TanStack Query 메인테이너 Tk Dodo 님의 블로그](https://tkdodo.eu/blog/tags/react-query)
+- [테코톡(시모의 Tanstack Query)](https://www.youtube.com/watch?v=RfK15tw8H-I)

package.json

@@ -11,6 +11,8 @@
     "server": "npx json-server db.json"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.101.2",
+    "@tanstack/react-query-devtools": "^5.101.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.4.2",

src/App.jsx

@@ -5,13 +5,11 @@ import RestaurantList from "./components/RestaurantList.jsx";
 import { useState } from "react";
 import RestaurantDetailModal from "./components/RestaurantDetailModal.jsx";
 import AddRestaurantModal from "./components/AddRestaurantModal.jsx";
-import useRestaurantStore from "./store/useRestaurantStore.js";
+import useFilterStore from "./store/useFilterStore.js";
 
 function App() {
-  const selectedCategory = useRestaurantStore(
-    (state) => state.selectedCategory,
-  );
-  const setSelectedCategory = useRestaurantStore(
+  const selectedCategory = useFilterStore((state) => state.selectedCategory);
+  const setSelectedCategory = useFilterStore(
     (state) => state.setSelectedCategory,
   );
   const [clickedRestaurant, setClickedRestaurant] = useState(null);

src/components/AddRestaurantModal.jsx

@@ -2,24 +2,25 @@ import { useState } from "react";
 import Modal from "./Modal.jsx";
 import { CATEGORIES } from "../constants/categories.js";
 import styled from "styled-components";
-import useRestaurantStore from "../store/useRestaurantStore.js";
+import { useAddRestaurantMutation } from "../queries/useAddRestaurantMutation.js";
 
 export default function AddRestaurantModal({ onClose }) {
   const [category, setCategory] = useState("");
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
 
-  const addRestaurant = useRestaurantStore((state) => state.addRestaurant);
+  const mutation = useAddRestaurantMutation();
 
   async function handleFormSubmit(e) {
     e.preventDefault();
 
-    try {
-      await addRestaurant({ category, name, description });
-      onClose();
-    } catch {
-      alert("음식점 추가에 실패했습니다. 다시 시도해주세요.");
-    }
+    mutation.mutate(
+      { category, name, description },
+      {
+        onSuccess: () => onClose(),
+        onError: () => alert("음식점 추가에 실패했습니다. 다시 시도해주세요."),
+      },
+    );
   }
 
   return (

src/components/RestaurantList.jsx

@@ -1,30 +1,21 @@
 import { CATEGORY_IMAGES } from "../constants/categoryImages.js";
 import styled from "styled-components";
 import { filterRestaurants } from "../utils/filterRestaurants.js";
-import useRestaurantStore from "../store/useRestaurantStore.js";
-import { useEffect } from "react";
+import { useRestaurantsQuery } from "../queries/useRestaurantsQuery.js";
 
 export default function RestaurantList({
   selectedCategory,
   onRestaurantClick,
 }) {
-  const restaurants = useRestaurantStore((state) => state.restaurants);
-  const isLoading = useRestaurantStore((state) => state.isLoading);
-  const error = useRestaurantStore((state) => state.error);
-  const fetchRestaurants = useRestaurantStore(
-    (state) => state.fetchRestaurants,
-  );
+  const { data: restaurants, isLoading, error } = useRestaurantsQuery();
 
-  const filteredRestaurants = filterRestaurants(restaurants, selectedCategory);
+  if (isLoading) return <p>불러오는 중...</p>;
+  if (error) return <p>{error.message}</p>;
 
-  useEffect(() => {
-    fetchRestaurants();
-  }, [fetchRestaurants]);
+  const filteredRestaurants = filterRestaurants(restaurants, selectedCategory);
 
   return (
     <>
-      {isLoading && <p>불러오는 중...</p>}
-      {error && <p>{error}</p>}
       <List>
         {filteredRestaurants.map((restaurant) => {
           return (

src/main.jsx

@@ -1,9 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+      <ReactQueryDevtools />
+    </QueryClientProvider>
+  </React.StrictMode>,
 );

src/queries/queryKeys.js

@@ -0,0 +1,3 @@
+export const restaurantKeys = {
+  all: () => ["restaurants"],
+};

src/queries/useAddRestaurantMutation.js

@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createRestaurant } from "../api";
+import { restaurantKeys } from "./queryKeys";
+
+export function useAddRestaurantMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: createRestaurant,
+    onMutate: async (newRestaurant) => {
+      await queryClient.cancelQueries({ queryKey: restaurantKeys.all() });
+
+      const previousRestaurants = queryClient.getQueryData(restaurantKeys.all());
+
+      queryClient.setQueryData(restaurantKeys.all(), (old) => [
+        ...old,
+        { ...newRestaurant, id: crypto.randomUUID() },
+      ]);
+
+      return { previousRestaurants };
+    },
+    onError: (_err, _newRestaurant, context) => {
+      queryClient.setQueryData(restaurantKeys.all(), context.previousRestaurants);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: restaurantKeys.all() });
+    },
+  });
+}

src/queries/useRestaurantsQuery.js

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import { getRestaurants } from "../api";
+import { restaurantKeys } from "./queryKeys";
+
+export function useRestaurantsQuery() {
+  return useQuery({
+    queryKey: restaurantKeys.all(),
+    queryFn: getRestaurants,
+  });
+}

src/store/useFilterStore.js

@@ -0,0 +1,21 @@
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+import { ALL_CATEGORY } from "../constants/categories.js";
+
+const useFilterStore = create(
+  persist(
+    (set) => ({
+      // 상태
+      selectedCategory: ALL_CATEGORY,
+
+      // 액션
+      setSelectedCategory: (category) => set({ selectedCategory: category }),
+    }),
+    {
+      name: "category-filter",
+      storage: createJSONStorage(() => sessionStorage),
+    },
+  ),
+);
+
+export default useFilterStore;