리액트 쿼리

리액트 쿼리는 리액트 쿼리는 서버 상태 관리 라이브러리로서 데이터 fetching, caching, synchronization, 그리고 업데이트를 쉽게 할 수 있게 도와줍니다. React 애플리케이션에 데이터를 가져오는 작업을 간편하게 하면서, 성능을 개선하고 사용자 경험을 향상시키는 데 중점을 둡니다.

리액트 쿼리의 예시코드는 리액트 쿼리를 사용하여 데이터를 가져오고 캐시하는 예시코드는 다음과 같습니다. useQuery 훅을 사용해 서버로부터 데이터를 요청하고, 이를 컴포넌트에서 쉽게 접근할 수 있게 합니다.

import { useQuery } from 'react-query';

const fetchUserData = async () => {
  const response = await fetch('/api/user');
  return response.json();
};

function UserProfile() {
  const { data, isLoading, error } = useQuery('user', fetchUserData);

  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;

  // Render data
  return <div>Username: {data.name}</div>;
}

이 코드는 사용자 데이터를 불러오기 위해 useQuery를 활용하고 있습니다.