솧디의 개발로그

아래의 코드로 무한 스크롤 구현하니 로그인시 마이페이지 첫 겟요청시 리랜더링 이슈 발생, 새로고침해야 데이터가 캐싱되었습니다. const fetchPostList = async (pageParam) => { const res = await axios.get( `http://localhost:5001/posts?&page=${pageParam}&limit=6`,{ header:{ authorization, }, }, ); const { posts, isLast } = res.data; return { posts, nextPage: pageParam + 1, isLast }; }; function Posts() { const { ref, inView } = useInView(); const { data, s..

import { useQuery, useInfiniteQuery } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { useDeleteDetailPost } from "../../querys/detail"; import axios from "axios"; import { Box } from "../../components"; import { Board } from "./board"; const MyBoard = () => { const B..

react-query react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용됩니다. #사용하는 이유 저의 경우 서버로 부터 값을 가져오거나 업데이트 하는 로직을 store 내부에 개발하는 경우가 많습니다. 그렇다보니 store는 클라이언트 state를 유지해야하는데 어느 순간부터 store에 클라이언트 데이터와 서버 데이터가 공존 하게 됩니다. 그리고 그 데이터가 서로 상호작용하면서 서버 데이터도 클라이언트 데이터도 아닌 끔찍한 혼종(?)이 탄생하게 됩니다. (예를 들면 서버에는 이미 패치된 데이터가 클라이언트에서는 패치되기 전 데이터가 유저에게 사용되고 있는 것이라고 볼 수 있습니다.) 그래서 react-query를 사용함..