React Query(현재 TanStack Query라고 함)는 React 애플리케이션을 위한 매우 인기 있는 데이터 가져오기 및 상태 관리 라이브러리입니다. 데이터 가져오기, 캐싱, 동기화 및 페이지 매김의 복잡성을 처리하여 원격 데이터 작업을 단순화합니다. React Query는 API 요청, 데이터 저장 및 업데이트, 로딩 상태 관리와 관련된 수동 프로세스의 대부분을 추상화합니다.
TanStack Query는 개발자가 최소한의 설정으로 React 애플리케이션에서 서버 상태를 관리할 수 있도록 지원하여 특히 비동기 작업을 처리할 때 원활한 사용자 경험을 보장합니다.
React 쿼리는 React 애플리케이션에서 서버 측 데이터와 상호 작용하는 프로세스를 단순화하는 데 도움이 되는 데이터 가져오기 및 상태 관리 도구입니다. 데이터 가져오기, 캐싱, 동기화 및 백그라운드 업데이트를 추상화하고 관리합니다.
주로 REST API, GraphQL 또는 기타 데이터 소스의 데이터와 같이 원격 서버나 API에서 제공되는 데이터를 나타내는 서버 상태를 관리하는 데 사용됩니다.
주요 기능:
React Query의 쿼리는 서버(또는 외부 데이터 소스)에서 데이터를 가져오는 데 사용됩니다. 쿼리는 React 쿼리가 데이터를 캐시하고 추적하는 데 사용하는 고유 키로 식별됩니다.
import { useQuery } from 'react-query';
function fetchPosts() {
return fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json());
}
const Posts = () => {
const { data, error, isLoading } = useQuery('posts', fetchPosts);
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error fetching posts</div>;
return (
<ul>
{data.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
};
변이는 서버에서 데이터를 수정하거나 생성하는 데 사용됩니다(예: POST, PUT, DELETE 요청). 쿼리와 마찬가지로 변형도 추적할 수 있으며 성공적인 변형 후 상태를 자동으로 업데이트할 수 있습니다.
import { useMutation } from 'react-query';
function createPost(postData) {
return fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify(postData),
headers: { 'Content-Type': 'application/json' },
}).then((response) => response.json());
}
const NewPost = () => {
const mutation = useMutation(createPost);
const handleCreatePost = async () => {
await mutation.mutate({ title: 'New Post', body: 'This is a new post' });
};
return (
<div>
<button onClick={handleCreatePost}>Create Post</button>
{mutation.isLoading ? <p>Creating post...</p> : null}
{mutation.isError ? <p>Error creating post</p> : null}
{mutation.isSuccess ? <p>Post created!</p> : null}
</div>
);
};
React Query는 쿼리 결과를 자동으로 캐시합니다. 이 캐싱을 사용하면 렌더링 속도가 빨라지고 서버에 대한 중복 요청을 방지할 수 있습니다. 캐시된 데이터는 쿼리를 다시 가져오면 자동으로 업데이트됩니다.
캐시 시간을 설정하거나 오래된 시간(캐시된 데이터가 오래된 것으로 간주되는 시간)을 지정하는 등 앱의 필요에 맞게 캐싱 동작을 맞춤설정할 수 있습니다.
const { data } = useQuery('posts', fetchPosts, {
staleTime: 1000 * 60 * 5, // Cache is fresh for 5 minutes
cacheTime: 1000 * 60 * 30, // Cache persists for 30 minutes
});
React Query는 페이지 매김을 기본적으로 지원합니다. 사용자 정의 페이지 및 제한 매개변수를 사용하여 페이지가 매겨진 데이터를 가져올 수 있으며 응답을 적절하게 캐시합니다.
const fetchPage = (page) => fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`)
.then((res) => res.json());
const PaginatedPosts = () => {
const [page, setPage] = React.useState(1);
const { data, isLoading, isError } = useQuery(['posts', page], () => fetchPage(page));
if (isLoading) return <div>Loading...</div>;
if (isError) return <div>Error</div>;
return (
<div>
<ul>
{data.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
<button onClick={() => setPage((prev) => prev - 1)} disabled={page === 1}>
Previous
</button>
<button onClick={() => setPage((prev) => prev + 1)}>Next</button>
</div>
);
};
React Query를 사용하려면 반응 쿼리(TanStack Query)를 설치해야 합니다.
npm install react-query
애플리케이션에서 React Query를 활성화하려면 QueryClientProvider에서 루트 구성 요소를 래핑하여 전체 앱에 필요한 컨텍스트를 제공해야 합니다.
import { QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();
const App = () => (
<QueryClientProvider client={queryClient}>
<YourApp />
</QueryClientProvider>
);
React Query는 useInfiniteQuery를 사용하여 페이지 매김과 무한 스크롤을 지원하므로 무한한 목록과 페이지 매김을 처리할 수 있습니다.
import { useInfiniteQuery } from 'react-query';
function fetchPostsPage({ pageParam = 1 }) {
return fetch(`https://jsonplaceholder.typicode.com/posts?_page=${pageParam}`)
.then((res) => res.json());
}
const InfinitePosts = () => {
const {
data,
fetchNextPage,
hasNextPage,
isLoading,
isFetchingNextPage,
} = useInfiniteQuery('posts', fetchPostsPage, {
getNextPageParam: (lastPage, allPages) => lastPage.length === 10 ? allPages.length + 1 : false,
});
return (
<div>
{isLoading ? <div>Loading...</div> : null}
{data?.pages.map((page, i) => (
<div key={i}>
{page.map((post) => (
<p key={post.id}>{post.title}</p>
))}
</div>
))}
<button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
{isFetchingNextPage ? 'Loading more...' : hasNextPage ? 'Load More' : 'No more posts'}
</button>
</div>
);
};
queryClient.invalidateQueries를 사용하여 쿼리를 수동으로 무효화할 수 있습니다. 그러면 지정된 쿼리 키에 대한 데이터가 강제로 다시 가져옵니다.
import { useQuery } from 'react-query';
function fetchPosts() {
return fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json());
}
const Posts = () => {
const { data, error, isLoading } = useQuery('posts', fetchPosts);
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error fetching posts</div>;
return (
<ul>
{data.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
};
React 쿼리는 로드, 성공 및 오류 상태 처리를 위한 상용구를 줄여 데이터 가져오기를 더 쉽고 선언적으로 만듭니다.
가져온 데이터는 기본적으로 캐시되어 불필요한 네트워크 요청을 줄이고 앱 속도를 높입니다.
React Query는 백그라운드 데이터 가져오기 기능을 제공하여 앱 데이터를 명시적으로 다시 가져오지 않아도 최신 상태로 유지합니다.
React Query에 내장된 후크를 사용하면 페이지 매김과 무한 스크롤을 간단하고 효율적으로 처리할 수 있습니다.
React Query는 쿼리, 변형 및 해당 상태를 실시간으로 검사할 수 있는 뛰어난 DevTools 인터페이스를 제공합니다.
**
React 쿼리(TanStack Query)는 React 애플리케이션에서 데이터 가져오기 및 상태 관리를 처리하는 효율적이고 확장 가능한 방법을 제공합니다. 내장된 캐싱, 백그라운드 가져오기, 페이지 매김 및 오류 처리 기능을 갖춘 React Query는 서버 측 데이터와 쉽고 원활하게 상호 작용할 수 있도록 해줍니다.
위 내용은 React 쿼리(TanStack 쿼리): React를 위한 효율적인 데이터 가져오기 및 상태 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
