import axios from 'axios';
import { useState, useEffect } from 'react';

interface Todo {
  id: number;
	title: string;
	userId: number;
	completed: boolean;
}

function TodoList() {
	const [todos, setTodos] = useState<Todo[]>([]);
	const [error, setError] = useState<Error | null>(null);

	useEffect(() => {
		axios.get('<https://jsonplaceholder.typicode.com/todos>')
			.then(response => setTodos(response.data))
			.catch(error => setError(error));
	}, []);

	if (error) {
		return <p>{error.message}</p>
	}

	return (
		<ul className="list-group">
			{todos.map(todo => (
				<li key={todo.id} className="list-group-item">
					{todo.title}
				</li>
			))}
		</ul>
	);
}

export default TodoList;

<aside> 🔥 React App의 일반적인 상태 및 이펙트 관리 코드이다.

작성된 코드에서는 아래 문제를 찾을 수 없다.

• 요청 취소
• 관심사의 분리
• 재시도
• 자동 새로고침
• 캐싱

React Query는 React 앱에서 데이트 패치, 캐싱 관리에 사용되는 강력한 라이브러리

</aside>

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query

<aside> 🔥 애플리케이션 상태 중 서버에서 패치된 상태를 관리할 때 React Query를 활용

React Query는 클라이언트 상태 관리에 사용되는 도구가 아니다.

</aside>

React 앱 상태는 컨텍스트 대신, Zustand 같은 라이브러리를 사용 할 수 있다.

설치

pnpm add @tanstack/[email protected]  // 설치
pnpm add -D @tanstack/eslint-plugin-query // 플러그인 설치

개발 도구

<aside> 🔥 React Query는 전용 개발 도구를 제공한다. 이 도구는 모든 내부 작업을 시각화하는 데 도움이 되며 디버깅을 효과적으로 할 수 있게 만든다.

기본적으로 React Query Devtools는 개발 중에만 사용되며, 프로덕션 빌드 중에는 자동 제외

</aside>

pnpm add @tanstack/[email protected] // 개발도구 설치

구성방법

// React Query 클라이언트 환경 구성

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient(); // 꼭 설치하고, 모든 쿼리에 사용되는 기본 옵션

//  쿼리 클라이언틀르 앱에 공급
function App() {
  return (
    <>
      <HelmetProvider>
        <ThemeProvider>
          <AuthProvider>
						// 쿼리 클라이언트를 앱에 공급
            <QueryClientProvider client={queryClient}>
              <div className="App">
                <RouterProvider router={router} />
              </div>
							// 탠스택 쿼리 개발 도구 , 개발 중에만 보인다.
						<ReactQueryDevtools />
            </QueryClientProvider>
          </AuthProvider>
        </ThemeProvider>
      </HelmetProvider>
      <Toaster />
    </>
  );
}

export default App;