쿼리 함수란?
리액트에서 쿼리 함수는 데이터를 가져오거나, 서버와의 상호작용을 처리하는 데 사용된다. 이는 주로 데이터 패칭 라이브러리인 react-query나 axios 등을 통해 구현된다. 쿼리 함수는 비동기 작업을 수행하며, 주로 API 호출을 통해 서버로부터 데이터를 조회한다.
쿼리 함수의 중요성
-
데이터 상태 관리: 쿼리 함수는 서버로부터 받은 데이터의 상태를 관리한다. 이는 데이터가 로딩 중인지, 성공적으로 받아졌는지, 오류가 발생했는지 등의 상태 정보를 포함한다.
-
캐싱과 최적화: 데이터 패칭 후에 캐싱을 통해 성능을 최적화한다. 캐시된 데이터는 재사용되어 불필요한 네트워크 요청을 줄인다.
-
자동 업데이트와 무효화: 쿼리 함수를 통해 데이터가 변경될 때 자동으로 컴포넌트를 업데이트한다. 또한, 데이터 무효화를 통해 최신 상태의 데이터를 유지한다.
쿼리 함수의 구현
-
비동기 함수 사용: async와 await을 사용하여 비동기적으로 데이터를 패치한다. 이 방법은 코드의 가독성을 높이고, 비동기 흐름을 쉽게 관리할 수 있게 한다.
-
오류 처리: try-catch 블록을 사용하여 API 호출 중 발생할 수 있는 예외를 적절히 처리한다. 이를 통해 사용자에게 의미 있는 오류 메시지를 제공할 수 있다.
-
캐싱 전략: react-query와 같은 라이브러리는 자체적인 캐싱 메커니즘을 제공한다. 이를 통해 데이터 재사용성을 높이고, 네트워크 비용을 절감한다.
-
커스텀 훅: 쿼리 함수를 커스텀 훅으로 구현하여 재사용성을 높일 수 있다. 이 방법은 로직의 재사용성과 모듈화를 촉진한다.
예제
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();
};
function useUserData() {
return useQuery('userData', fetchUserData, {
staleTime: 5000, // 데이터가 오래된 것으로 간주되기 전 시간 (밀리초)
cacheTime: 10000, // 캐시에서 데이터가 유지되는 시간 (밀리초)
onError: (error) => {
// 오류 처리
console.error('Error fetching user data:', error);
},
});
}
이 예제에서 useQuery는 react-query 라이브러리의 핵심 훅이다. fetchUserData 함수는 비동기적으로 사용자 데이터를 API에서 가져온다. staleTime과 cacheTime 옵션은 각각 데이터의 신선도와 캐시 유지 시간을 관리한다. onError 콜백은 오류가 발생했을 때 실행된다.
