[React] React-query 정리

React-query란?

React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리 

 

 

React Query를 쓰는 이유

- 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있음 

- 서버 데이터와 클라이언트 데이터를 분리하고 싶을 때 유용함 

 

useQuery란?

React Query 라이브러리에서 제공하는 훅으로, 서버에서 데이터를 가져오고 캐싱, 상태관리, 자동 업데이트 등을 효율적으로 처리 가능 

 

주요 매개변수 

queryKey: 쿼리의 고유 키 역할을 하며 배열 형태로 설정됨 

queryFn: 데이터를 가져오는 함수 

staleTime(선택사항): 데이터가 오래된 상태로 간주되기 까지의 시간

cacheTime(선택사항): 데이터가 메모리에 캐싱되는 시간 

refetchOnWindowFocus(선택사항, 기본값 true): 사용자가 브라우저 탭을 다시 활성화할때 데이터 자동으로 새로고침 

 

예시 

<쿼리 옵션 설정>

const { data, isLoading, isFetching } = useQuery({
  queryKey: ['userData'],
  queryFn: fetchUserData,
  staleTime: 10000,  // 10초 동안 캐시 유지
  refetchOnWindowFocus: false,  // 브라우저 포커스 변경 시 새로고침 안 함
});

 

-> 자동 캐싱, 새로 고침, 에러 핸들링 기능이 내장되어 있어 훨씬 편리하다

(useEffect + useState를 사용하는 것 보돠!)

 

 

참고:

https://kyounghwan01.github.io/blog/React/react-query/basic/#usequery