React-Query

React-Query 란?

• 서버상태 관리를 쉽게 하도록 도와주는 라이브러리

React-Query를 사용하는 이유

1.fetching: 서버에서 데이터 받아오기
2.caching: 서버에서 받아온 데이터를 따로 보관해서 동일한 데이터가 단 시간내에 필요할 시 서버요청없이 보관된 데이터에서 꺼내쓰기
3.synchronizing: 서버상의 데이터와 보관 중인 캐시 데이터를 동일하게 만들기
4.updating: 서버데이터 변경 용이

// React Query 미사용 시
const [todos, setTodos] = useState([]);
const [isLoading, setIsLoading] = useState(false);

const getTodos = async () => {
  setIsLoading(true);
	const data = await axios.get(`${API_URL}/todos`).then(res => res.data);
	setTodos(data);
  setIsLoading(false);
}
useEffect(() => {
	getTodos();
}, []);


// React Query 사용 시
const getTodos = () => axios.get(`${API_URL}/todos`).then(res => res.data);

const { data: todos, isLoading } = useQuery(["todos"], getTodos);

캐시데이터는 어디에 보관할까?

• QueryClientProvider는 React Context API를 내부적으로 사용
• QueryClientProvider의 자식으로 있는 모든 컴포넌트들은 캐시데이터에 보관할 수 있습니다.
• 페이지 컴포넌트 외부에 상태가 존재한다는 점에서 캐시 데이터는 전역 상태로 볼 수 있습니다.

// App.jsx
const queryClient = new QueryClinet();

const App = () => {
	return (
		<QueryClientProvider client={queryClient}>
			<Router />
		</QueryClientProvider>
	);
}

1. ["todos"]에 대한 캐시데이터 요청
2. 없음(undefined)로 반환
3. getTodos 호출
4. ["todos"]에 대한 데이터로 캐싱처리
5. 신규 데이터로 반환
6. ["todos"]에 대한 캐시데이터 요청
7. 캐시 데이터 반환(이후 패턴 동일)