1011 - 리액트쿼리

[gihwan0501]

useQuery는 React 애플리케이션에서 데이터 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 처리할 수 있게 해주는 라이브러리인 React Query에서 제공하는 훅(hook)입니다. useQuery는 서버에서 데이터를 가져와 상태를 관리하고, 그 데이터의 로딩, 에러 상태 등을 처리하는 데 사용됩니다. : 설치 npm install react-query : bookables 목록을 요청하는 컴포넌트가 2군데 -> 예약자원(BookablesView), 예약(BookingsPage)에서 useFetch (fetch)를 각각 요청해서 데이터를 받아온다.

[gihwan0501]

useQuery는 React Query의 훅으로, 서버에서 데이터를 가져오고 상태를 관리하는 데 사용됩니다. 이 훅은 내부적으로 캐싱 메커니즘을 가지고 있어, 서버에서 데이터를 가져오는 비용을 줄이고 성능을 향상시킵니다.

캐싱의 주요 특징 데이터 저장: useQuery를 사용하여 데이터를 가져오면, 해당 데이터가 캐시에 저장됩니다. 같은 쿼리를 다시 요청할 경우, 캐시에서 데이터를 바로 가져올 수 있습니다.

자동 리패칭: 기본적으로 React Query는 데이터가 오래되었다고 판단되면 자동으로 다시 요청합니다. 이를 통해 항상 최신 데이터를 유지할 수 있습니다.

배경 업데이트: 사용자가 페이지를 떠나기 전에 쿼리가 최신인지 확인하기 위해, React Query는 배경에서 데이터를 업데이트할 수 있습니다.

쿼리 키: 각 쿼리는 고유한 키를 가집니다. 이 키를 통해 React Query는 어떤 데이터를 캐싱할지 관리합니다. 키가 다르면 서로 다른 데이터로 취급됩니다.

TTL (Time to Live): 캐시된 데이터가 얼마나 오래 유효한지를 설정할 수 있습니다. 이 값을 조정하여 데이터의 유효 기간을 관리할 수 있습니다.

무효화: 특정 이벤트(예: 데이터 수정) 발생 시 캐시를 무효화하고, 다음 쿼리 요청 시 서버에서 최신 데이터를 가져오도록 할 수 있습니다.

import { useQuery } from 'react-query';

const fetchUserData = async () => { const response = await fetch('/api/user'); if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); };

const UserComponent = () => { const { data, error, isLoading } = useQuery('user', fetchUserData);

if (isLoading) return

Loading...

; if (error) return

Error: {error.message}

;

return

User Name: {data.name}

; };

위 예시에서 useQuery는 'user'라는 키로 데이터를 캐시합니다. 같은 키를 사용하는 다른 컴포넌트에서도 캐시된 데이터를 활용할 수 있습니다.

이런 캐싱 메커니즘 덕분에 React Query는 서버와의 데이터 통신을 효율적으로 관리하고, 사용자 경험을 개선할 수 있습니다.

[gihwan0501]

<useQuery 리턴값 >