React Query vs Memoization

React Query vs Memoization

React Query는 단순히 함수의 반환값을 캐싱하는 Memoization과는 달리,

 

• 네트워크 데이터를 캐싱합니다.
• 데이터를 캐싱할 유효 기간(staleTime)과 메모리 해제 시점(gcTime)을 세부적으로 제어합니다.
• 데이터가 fresh인지, stale인지에 따라 UI를 업데이트하거나, 네트워크 요청을 다시 보냅니다.

 

React Query는 네트워크 데이터를 효율적으로 관리하기 위해 Memoization 이상의 기능을 제공합니다. 

* Memoization 기능을 제공하는 memoization hook(함수의 반환값 캐싱)들과는 아예 다른 기능(네트워크 데이터 캐싱)을 가지고 있다!

staleTime과 gcTime으로 데이터를 필요할 때만 갱신하여 불필요한 네트워크 요청을 줄이고, 메모리 공간을 효율적으로 관리합니다.

따라서 React Query를 사용하는 경우, 별도로 훅을 구현하거나 Memoization을 관리하지 않아도 동일한 효율성을 얻을 수 있습니다.

 

 

React Query와 React의 메모이제이션 훅의 차이점*

React Query와 React의 메모이제이션 훅들(useMemo, useCallback, React.memo)은 아예 다른 역할을 담당합니다.

React Query는 네트워크 데이터 관리에 특화되어 있고, 메모이제이션 훅들은 일반적인 컴포넌트와 함수 최적화를 위해 사용됩니다.

 

React Query는 주로 네트워크 요청의 결과(데이터)를 캐싱하고 효율적으로 관리하는 데 초점을 맞춘 반면,

useCallback, useMemo, React.memo는 일반 함수, 함수의 반환값, 컴포넌트의 메모이제이션을 위해 사용됩니다.

	React Query (useQuery)	Memoization (useMemo, React.memo, useCallback)
목적	네트워크 데이터를 캐싱하고 동기화 관리	계산 비용을 줄이고, 함수 호출 결과를 캐싱하여 불필요한 함수/컴포넌트 재생성을 방지
적용 대상	서버에서 가져온 데이터 (API 응답 등)	함수, 함수의 반환값 (로컬 계산 결과), 컴포넌트
유효 기간 관리	staleTime과 gcTime으로 제어 가능	별도의 로직으로 수동 관리 필요
자동 네트워크 요청	stale 상태면 자동으로 새 데이터를 요청	동일 입력값이면 캐싱된 값 반환, 데이터 갱신 없음
캐시 공간 관리	데이터를 자동으로 캐싱하고, staleTime 및 gcTime으로 유효성 관리	수동으로 캐시 공간 관리 필요 (개발자가 의존성 배열로 직접 관리
데이터 동기화	서버와 클라이언트 간 데이터 동기화 (refetch, invalidateQueries)	해당 기능 없음