리액트 심화/react-query

useInfiniteQuery - 무한 스크롤

Why infinte-query? react-query의 캐싱 기능이 없이 무한 스크롤을 구현했다고 생각해보자! useState에 서버에서 받아온 데이터를 쌓아나갈 때, 데이터에 좋아요 버튼이 있어서 클릭(좋아요 API 호출)한다고 하면 화면에 바로 반영이 되지 않을 것이다. 새로고침을 해서 API를 차례로 호출하면서 다시 좋아요가 눌린 요소까지 내려가야 좋아요가 눌린 상태를 확인할 수 있다! 좋아요가 눌린 최신 서버 데이터가 아니기 때문이다! 하지만 react-query는 useMutate로 서버의 데이터를 변경하는 API를 호출(좋아요 버튼 클릭)해서 캐싱 데이터를 초기화해서 다시 서버에서 최신 데이터를 받아올 수 있다! → 좋아요가 눌린 서버의 데이터를 바로 받아와서 즉시 좋아요가 눌렸다는 표시를 ..

react-query 모듈화 - Custom Hooks

문제점 useQuery나 useMutate, useQueryClient 등 react-query에서 자주 쓰이는 훅을 모듈화 시킬 때, 아래처럼 컴포넌트나 Custom Hooks 밖에서 export 시키면 오류가 발생한다!! import { useMutation, useQuery, useQueryClient } from "react-query"; import api from "../utils/api"; export const queryClient = useQueryClient(); export const { data, isSuccess } = useQuery(["my_board"], () => api.get("/api/board") ); export const { mutate } = useMutation..

react-query

클라이언트/서버 상태 프론트엔드 개발시에 다루는 상태는 클라이언트 상태와 서버 상태로 크게 두가지가 있다 클라이언트 상태 - view를 위한 데이터 한 유저만을 위한 데이터(세션간 지속될 필요 없는 데이터) 렌더링에 반영하기 위한 데이터 →컴포넌트의 state를 화면에 보여줄때, input의 state, 동기적으로 저장되는 redux store의 데이터 등 서버 상태 - 서버에서 가지고 오는 데이터 여러 유저가 공유해야 하는 데이터(세션간 지속되어야 하는 데이터) DB에 저장되어 있는 데이터 → axios로 api를 호출해서 자원을 가져오는 경우 react-query 서버 상태를 관리하기 위한 상태 관리 라이브러리이다. API 요청에 특화 서버의 값을 클라이언트 쪽에 가져오거나 캐싱, 업데이트, 에러 핸..