Promise 기반, 데이터 패칭 / 캐싱 라이브러리

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를 활용할 수 있습니다.

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

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