React Query

React 앱에서 데이터를 관리하고 처리하기 위한 JavaScript 라이브러리. 앞서 알아보았던 Recoil은 컴포넌트의 상태 관리에 중점을 둔 라이브러리라면 React Query는 주로 데이터 캐싱 및 관리를 위해 설계되었다.

장점

• React Component 내부에서 API를 다룰 수 있다.
• 캐싱 제공
  
  

캐싱이란?

특정 데이터를 저장하여 나중에 동일한 데이터에 대한 요청 시 사용 => 동일한 데이터의 호출 반복을 방지하며 API 요청을 줄여 애플리케이션의 성능을 향상

사용 방법

npm install react-query

or

yarn add react-query

리액트 쿼리 설치

import { useQuery } from 'react-query';

import!

const { data, isLoading, isError } = useQuery('users', fetchUsers);

위 코드에서는 React-Query의 useQuery 훅을 사용해 'users'라는 key로 데이터를 가져오고, fetchUsers 함수를 호출하여 해당 데이터를 관리한다. 가져온 데이터는 data에 저장되며, 데이터가 로딩 중인지 여부는 isLoading 변수에, 데이터 요청 중 에러가 발생했는지 여부는 isError 변수에 저장된다.




이론 공부만으로는 이해를 잘 못하는 편이라 개념과 아주 기초적인 내용만 간단하게 정리해봤다. 프로젝트에 적용 시키며 내용을 채울 예정이다. 나는 정말 바보였구나싶다 그냥