데이터 패치, 캐싱 라이브러리

• 목차

TanStack Query를 사용하는 이유

아래는 React 애플리케이션의 일반적인 상태 및 이펙트 관리 코드입니다.

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;

작성된 위 코드에서 다음의 문제를 찾을 수 있습니다.

• 요청 취소(Request cancelation) 없음
• 관심사의 분리(Seperation of concerns) 없음
• 재시도(retry) 없음
• 자동 새로고침(auto refresh) 없음
• 캐싱(caching) 없음

TanStack Query는 React 앱에서 데이터 패치, 캐싱 관리에 사용되는 강력한 라이브러리입니다.

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