Tanstack Query는 뭘까

목차

1. TanStack Query란

2. 설치 및 기본 설정

    2-1. TanStack 패키지 설치

    2-2. Query Client 생성 및 Provider 설정

3. 데이터 조회 (Fetching)

4. 데이터 변경 (Mutations)

5. 쿼리 무효화 및 리패칭

6. 기타 기능들

7. 툴

---

1. TanStack Query란

서버로부터 데이터 가져오기, 캐싱, 제어 등 데이터의 효율적인 관리를 돕는 라이브러리이다.

https://tanstack.com/query/latest

TanStack Query

 

대표적인 기능

• 데이터 패칭 및 캐싱 : API로부터 데이터를 가져오고 캐시에 저장하여, 불필요한 네트워크 요청 방지
• 자동 리패칭 : 데이터의 신선도를 유지하기 위해, 백그라운드에서 자동으로 데이터를 갱신
• 무한 스크롤, 페이지네이션 등의 성능 최적화
• 에러 처리 및 재시도 : 네트워크 오류 발생 시 자동으로 재시도, 에러 상태를 쉽게 관리
• 쿼리 무효화 : 데이터 변경 후 관련된 쿼리를 무효화하여 최신 데이터를 반영

 

---

2. 설치 및 기본 설정

1. Tanstack Query 패키지 설치

npm i @tanstack/react-query

 

 

2. QueryClient 생성 및 Provider 설정

TanStack Query를 사용하기 위해 QueryClient를 생성하고, 루트에 QueryClientProvider를 설정한다.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();

function App() {
	return (
    	<QueryClientProvider client={queryClient}>
        {/*  application components */}
        </QueryClientProvider>
    );
}

 

 

---

3. 데이터 조회 (Fetching)

useQuery hook을 사용하여 fetching한다.

import { useQuery } from '@tanstack/react-query';

function Posts() {
    const { data, isLoading, error } = useQuery({
        queryKey: ['posts'],
        queryFn: async () => {
            const response = await fetch('https://jsonplaceholder.typicode.com/posts');
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        },
    });

    if (isLoading) retun <div> loading... </div>
    if (error) return <div> error:{error.msg}</div>

    return (
        <ul>
            {data.map((post) => (
                <li key={post.id}>{post.title}</li>
            ))}
        </ul>
    );
}

** queryKey : 캐시 식별자

** queryFn : 데이터를 가져오는 비동기 함수

 

 

---

4. 데이터 변경 (Mutations)

useMutation hook을 사용하여 서버에 데이터를 추가하거나 수정한다.

import {useMutation, useQueryClient } from '@tanstack/reac-query';

function AddPost() {
	const queryClient = useQueryClient();
    
    const mutation = useMutation({
    	mutationFn: async (newPost) => {
        	const response = await fetch('https://jsonplaceholder.typicode.com/posts',
                method: 'POST',
                body: JSON.stringify(newPost),
                headers: { 'Content-Type': 'application/json'},
        	});
        	if(!response.ok) {
        		throw new Error('Network response was not ok');
        	}
        	return response.json();
    	},
        onSuccess: () => {
            // 'posts' query를 무효화하여 데이터를 새로 고침
           queryClient.invalidateQueries({ queryKey: ['posts']});
        },
    });

    const handleAddPost = () => {
        mutation.mutate({ title: 'new post', body: 'contents', userId: 1 });
    };

    return <button onClick={handleAddPost}> add post</button>;
}

onSuccess 콜백에서 관련 쿼리를 무효화하여 최신 데이터를 가져올 수 있다.

 

 

---

5. 쿼리 무효화 및 리패칭

데이터 변경 후, 혹은 특정 조건에 따라 특정 쿼리를 무효화하여 데이터를 새로 고침할 수 있다.

queryClient.invalidateQueries({queryKey: ['posts'] });

 

 

---

6. 기타 기능들

enabled 옵션을 사용해서 쿼리 실행 여부(활성화 조건)을 제어할 수 있다.

useQuery({
    queryKey: ['user', userId],
    queryFn: fetchUser,
    enabled: !!userId,	//userId가 있을 때만 실행
});

 

select 옵션을 사용해서 쿼리 결과를 선택하고 변환할 수 있다.

useQuery({
	queryKey: ['posts'],
    queryFn: fetchPosts,
    select: (data) => data.slice(0, 10),	//상위 10개 포스트 선택
});

 

staleTime, cacheTime 옵션을 사용해서 데이터의 신선도와 캐시 유지 시간을 설정할 수 있다.

useQuery({
	queryKey: ['posts'],
    queryFn: fetchPosts,
    staleTime: 1000 * 60 * 5,	//5분 동안 fresh한 데이터로 간주
    cacheTime: 1000 * 60 * 10,	//10분 동안 캐시 유지
});

 

 

---

7. 툴

React Query Devtools를 사용해서 쿼리 상태를 시각적으로 확인할 수 있다.

npm install @tanstack/react-query-devtools

import { ReactQueryDevtools } from '@tanstack/reac-query-devtools';

function App() {
	return (
    	<QueryClientProvider client={queryClient}>
        	{/* application components */}
            <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
    );
}

 

 

 

 

 

예제 실습

https://ldd6cr-adness.tistory.com/304

TanStack Query 사용해보기