[React] React-query 정리

프로젝트에서 Loading과 useEffect로 axios를 사용하여 data를 받아오는 작업을 사용해보았고
React-query 라는 것을 알게되어서 사용해보고 프로퍼티는 어떠한 것이 있는지 장단점, 설명 등에 대해 정리 하고자 한다.

 

• React-Query는 비동기 로직을 쉽게 다루게 해주는 라이브러리
• React-Query는 Redux 처럼 전역적 데이터 관리를 할 수 있게 해주는 라이브러리
• data 캐싱을 사용하기 때문에 API를 지속적으로 받아와 모든것을 리렌더링 할 필요없이 변경된 부분에만 리렌더링이 일어나서 성능적으로 우위를 점할 수 있는 라이브러리 라고 생각한다.
• data 뿐만아닌 여러 프로퍼티가 있어 Loading, Success, Error, Idle, status 관리를 쉽게 할 수 있다. 

 

설치 및 세팅

npm i react-query

import { QueryClient, QueryClientProvider } from "react-query"

const client = new QueryClient();

root.render(
  <React.StrictMode>
      <QueryClientProvider client={client}>
        <App />
      </QueryClientProvider>
  </React.StrictMode>
);

• App 파일을 감싸 줌으로써 전역적으로 상태관리를 시행한다. 

 

사용 방법

const { isLoading, isError, data, isSuccess } = useQuery("allItems", fetchItems)

function fetchItems(){
	return axios('url').then(res => res.data)
}

//// x
const { isLoading, isError, data, isSuccess } = useQuery("allItems", fetchItems(item))

function fetchItems(item){
	return axios(`url + ${item}`).then(res => res.data)
}


/// o
const { isLoading, isError, data, isSuccess } = useQuery("allItems", () => fetchItems(item))

function fetchItems(item){
	return axios(`url + ${item}`).then(res => res.data)
}

1. "allItems" 라는 고유 키 값을 사용해야한다. ( 키값은 string 혹은 배열이다 )

2. 해당 값으로 캐싱이 일어나며 리렌더링 시 비교 하여 최소한의 리렌더링이 일어난다.

3. 만약 useQuery를 2개 이상 사용해야하며 Params를 사용하여 키값이 같을 경우 예시

const { itemId } = useParams();

const { isLoading : rareLoading } = useQuery([ "rare", itemId ], fetchItems)
const { isLoading : normalLoading } = useQuery([ "normal", itemId ], fetchItems)

// 6버전

const { isLoading : rareLoading } = useQuery([ "rare", itemId : string | undefined ], fetchItems)
const { isLoading : normalLoading } = useQuery([ "normal", itemId : string | undefined ], fetchItems)

4. 키값과 프로퍼티의 값이 동일 할 경우 해당 방식을 통해 변경을 해주면 된다.

5. react-router-dom v6 버전 부터는 useParams를 사용하게 되면 string | undefined로 자동 설정이 되어 비어 있는 key값이 설정될 우려가 있어 타입을 명확하게 지정을 해주어야한다.

 

6. 데이터 fetch를 axios로 사용하였고 특정 API의 data를 받아와서 사용한다.

7. useQuery의 fetch함수는 실행하는 것이 아닌 인자로 사용되어야하며

8. 인자가 있는 fetch 함수를 가지고와야할 경우 useQuery 내부에서 사용해야할 경우 함수를 새로이 만들어 줘야한다.

9. data에 저장된 API 데이터가 fetch가 완료 되었을 경우 isSuccess, 실패하였을 경우 isError, 받아오고 있는 중일 경우 isLoading이 사용된다.

 

추가적으로 

• 전역적으로 관리되기 때문에 데이터 소실이 일어나지 않을 것 같은데 리렌더링으로 쓸모없이진 데이터는 어떻게 정리하는지 차후 확인해볼 예정