09009

지금까지 저장했던 캐시 방식 Todo 상세 페이지 src\pages\todo-detail-page.tsximport { useTodoDataById } from "@/hooks/queries/use-todo-data-by-id";import { useParams } from "react-router";export default function TodoDetailPage() { // useParams : react router에서 제공하는 훅 const params = useParams(); // 현재 url 파라미터의 id 값을 가져온다. const id = params.id; const { data, isLoading, error } = useTodoDataById(String(id)); ..

Terminal에서 리액트 앱과 백엔드 서버 가동중인 상태에서 작업하기npm run devnpx json-server server/db.json 삭제 버튼 클릭 후, 백엔드 서버에 데이터 삭제 요청을 전송하여 실제 데이터 삭제하기 - 데이터 삭제 요청을 보내는 비동기 함수 생성src\api\delete-todo.tsimport { API_URL } from "@/lib/constants";import type { Todo } from "@/types";export async function deleteTodo(id: string) { const response = await fetch(`${API_URL}/todos/${id}`, { method: "DELETE", }); if (!respon..

비동기 요청이 실패했을 경우 에러 처리 - 데이터를 원상복구src\hooks\mutations\use-update-todo-mutation.tsimport { updateTodo } from "@/api/update-todo";import { QUERY_KEYS } from "@/lib/constants";import type { Todo } from "@/types";import { useMutation, useQueryClient } from "@tanstack/react-query";export function useUpdateTodoMutation() { const queryClient = useQueryClient(); return useMutation({ mutationFn: upda..

낙관적 업데이트 : 데이터 수정 요청이 성공할 것이라 낙관하고 요청을 보내자마자 데이터 업데이트(ex . 사용자에게 빠른 반응을 제공하는 sns에 주로 사용) 지체없이 화면에 업데이트한다인터넷 속도가 느린 상황에서도 사용자에게 빠른 피드백 제공 가능 체크박스 기능 만들기UI 구현src\components\todo-list\todo-item.tsximport { Button } from "../ui/button";import { Link } from "react-router";import type { Todo } from "@/types";export default function TodoItem({ id, content }: Todo) { const handleDeleteClick = () => {}..

이전에 했던 방식은 백엔드 서버에 저장된 투두아이템 개수가 많아질수록리페칭해야하는 데이터의 양이 계속 증가하여 서버의 부하를 일으킬 단점이 있다.-> 반환값을 이용하여 해결 캐시 무효화를 하지 않고, setQueryData 메서드 활용데이터 리페칭 없이 화면에 새로운 아이템 렌더링 가능src\hooks\mutations\use-create-todo-mutation.tsimport { createTodo } from "@/api/create-todo";import { QUERY_KEYS } from "@/lib/constants";import type { Todo } from "@/types";import { useMutation, useQueryClient } from "@tanstack/react-qu..

useTodosData가 fetchTodos 함수를 다시 실행하여 리페칭 되도록 하기 - 캐시 무효화src\hooks\mutations\use-create-todo-mutation.tsimport { createTodo } from "@/api/create-todo";import { useMutation, useQueryClient } from "@tanstack/react-query";export function useCrateTodoMutation() { // queryClient : 서버 상태와 관련된 모든 데이터를 보관하는 저장소 const queryClient = useQueryClient(); return useMutation({ mutationFn: createTodo, on..

Tanstack Query - 개발 중에 리액트 앱과 백엔드 서버를 항상 가동시킬 것 새로운 투두 아이템 추가 기능- 백엔드 서버에 데이터 추가 요청을 보낼 비동기 함수가 필요함 일단 id 값을 string 타입으로 수정src/api/fetch-todo-by-id.tsimport { API_URL } from "@/lib/constants";import type { Todo } from "@/types";export async function fetchTodoById(id: string) { const response = await fetch(`${API_URL}/todos/${id}`); if (!response.ok) throw new Error("Fetch Failed"); const data..

inactive : 해당 캐시 데이터를 활용하는 컴포넌트가 없을 때의 상태 = 캐시 데이터가 현재 사용되지 않는 상태Tanstack query는 오랫동안 사용하지 않는 불필요한 캐시를 메모리상에서 정리하여 성능 저하를 방지함 src/hooks/queries/use-todo-data-by-id.tsgcTime을 5초로 설정해보기gcTime: 5000,import { fetchTodoById } from "@/api/fetch-todo-by-id";import { useQuery } from "@tanstack/react-query";export function useTodoDataById(id: number) { return useQuery({ queryFn: () => fetchTodoById(..

TodoItem 상세페이지 생성 (Todo item 클릭 시 페이지 이동)src/pages/todo-detail-page.tsxexport default function TodoDetailPage() { return TodoDetailPage;} 라우팅 설정App.tsx} />import { Outlet, Route, Routes } from "react-router";import "./App.css";import IndexPage from "./pages/index-page";import SignInPage from "./pages/sign-in-page";import SignUpPage from "./pages/sign-up-page";import CounterPage from "./pages/co..

useQuery 훅을 통해 백엔드 서버에게 요청 - 데이터를 불러온다. 해당 데이터를 queryKey에 설정해둔 이름으로 자동으로 캐싱한다. Tanstack Query의 장점- 강력한 캐싱 기능을 이용해서 중복 요청을 방지, 앱 최적화 가능- 적절한 타이밍에 캐시 데이터를 갱신하거나 삭제 가능 fetching- 데이터를 불러오는 중일 때 fetch- 데이터가 신선한 상태일 때 stale- 데이터가 상한 상태 (데이터를 불러온지 시간이 좀 지났을 때, 오래된 데이터(stateTime : stale 상태로 변하기까지의 걸리는 시간) 리페칭 (데이터를 다시 불러옴): 상한(stale) 데이터를 계속 사용자에게 보여줄 순 없으니 특정 타이밍에 데이터를 다시 서버로부터 불러온다. Tanstack Query ..

Tanstack Query 설치Terminal 입력npm i @tanstack/react-query src/main.tsximport { QueryClientProvider, QueryClient } from "@tanstack/react-query";const queryClient = new QueryClient(); 리액트 앱에 있는 어떤 컴포넌트에서든 queryClient라는 store에 api 요청 상태를 보관할 수 있도록 설정import { createRoot } from "react-dom/client";import "./index.css";import App from "./App.tsx";import { BrowserRouter } from "react-router";import { Qu..

api 요청과 관련된 데이터들은 관리해야하는 데이터의 가지수가 많기 때문에 zustand를 활용해서 전역상태로 관리하기에는 매우 복잡해진다 이런 경우, 전역 상태와 지역 상태도 아닌 서버 상태로 관리한다.TanStack Query : 서버 상태 관리 라이브러리TanStack query 활용 예시 실습용 백엔드 서버 설정Terminal 입력json-server 도구 : json 형태의 파일을 이용해서 간단한 api 서버를 만들도록 해주는 도구CRUD가 모두 가능한, 간단한 백엔드 서버 구축 가능npm i json-server -D src/server/db.jsonserver 폴더 추가 + 데이터베이스 역할을 수행할 json 파일 생성간단한 투두 리스트 데이터 생성{ "todos": [ { ..