쿼리(Query)는 고유한 키와 연결된 비동기 데이터 소스에 대한 선언적 의존성이다. 1. useQuery컴포넌트에서 이 쿼리를 구독하기 위해서 useQuery 훅을 호출하는데 queryKey, queryFn 은 필수값이고, 기본 형태는 아래와 같다.import { useQuery } from "@tanstack/react-query";function Component() { const result = useQuery({ queryKey: ["libraries"], queryFn: () => fetchData() // ...options }) ...}- queryKey : 쿼리의 고유 키로 내부적으로 쿼리의 재조회, 캐싱, 애플리케이션 전체의 쿼리 ..
개인 프로젝트를 진행할 때 React Query 를 써본 경험이 있지만, 공식 문서를 보면서 하나하나 다시 기록하면서 공부해보려 한다. 1. 개요공식 명칭은 TanStack Query 로 서버 상태 관리를 위한 최고의 라이브러리 중 하나이다. 기술적으로 웹 애플리케이션에서 서버 상태를 가져오고, 캐시, 동기화, 갱신하는 작업을 매우 쉽게 만들어 준다. * 기능- 캐싱- 동일한 데이터에 대한 중복 요청을 단일 요청으로 중복 제거- 데이터가 얼마나 오래되었는지 확인하고, 데이터를 업데이트- 데이터 갱신을 최대한 빠르게 반영- 페이지네이션 및 데이터 지연 로딩 같은 성능 최적화- 서버 상태의 메모리 관리 및 가비지 컬렌셕(GC)- 구조적 공유를 통한 쿼리 결과 메모이제이션 * 장점- 비교적 코드의 양이 적고..