react-query 카테고리별 데이터 가져오기 (+ 반복되는 코드 줄이기)

개발환경 * react * typeScript * Firebase * react-query react-query로 데이터 가져오기 + firebase [api.ts] import { db } from '../shared/firebase'; import { collection, getDocs, orderBy, query, where } from 'firebase/firestore'; import { PostType } from '../types/Posts'; //관리자 (콘텐츠 by Mango) export const getAdminPostList = async (): Promise => { const q = query(collection(db, 'test'), where('role', '==', 'adm..

  • format_list_bulleted TIL :: Today I Learned
  • · 2024. 1. 9.
  • textsms
React : 리액트 쿼리 LifeCycle (+ isLoading, isFetching)

React : 리액트 쿼리 LifeCycle (+ isLoading, isFetching)

★ 제천 튜터님: 리액트쿼리의 찐 동작원리 ★ 1. 리액트 쿼리 리액트 쿼리 : 서버 상태관리를 쉽게 도와주는 라이브러리 ▼ ▼ 서버상태 : 서버에 요청하고 응답받는 모든 과정과 연관된 데이터들 (1) fetching : 서버에서 데이터 받아오기 (2) caching : 서버에서 받아온 데이터를 따로 보관 => 동일한 데이터가 단 시간 내에 다시 필요하면 서버 요청 없이 보관된 데이터 꺼내서 사용 (3) synchronizing : 서버상 데이터와 보관 중인 캐시 데이터를 동일하게 만들기 (동기화) (4) updating : 서버 데이터 변경 용이 => mutation & invalidateQueries 리액트 쿼리 미사용 : useState + useEffect 사용 const [todos, setTo..

  • format_list_bulleted React
  • · 2023. 12. 21.
  • textsms