[React Query] useQuery()

0. React Query란?

React에서 비동기 로직을 좀 더 편하게 다룰 수 있게 도와주는 라이브러리로

기존에 개발자가 구현하기 까다로웠던 isLoading, isError 등과 같은 기능들을 자체적으로 제공을 해준다.

 

이번 게시글은 React Query에 대해 이제 막 맛을 본 입장에서

React Query에 강의에서 배운 내용과 개인적으로 찾아서 공부한 내용을 정리해서 작성하였다.

 

따라서 이론적으로 정확하지 않은 내용이 대다수일 것 같은데

이러한 내용은 나중에 React Query에 대해 좀 더 깊게 파고든 뒤에 보완하도록 하겠다.

1. 간편한 데이터 관리
- 데이터를 가져오고, 캐싱, 동기화 및 업데이트 처리를 간편하게 할 수 있게 해줌

2. 실시간 업데이트 및 동기화
- 실시간 데이터 업데이트 및 자동 동기화를 지원하여
  서버와 클라이언트의 데이터의 일관성을 유지한다.

3. 데이터 캐싱
 - 데이터를 캐싱하여 불필요한 API 요청을 줄이고, Appliaction의 성능을 향상시킨다.

4. 서버 상태 관리
- Loading, Error 등의 서버 상태에 따른 관리를 간편하게 처리할 수 있다.

 

---

2. 'useQuery()'

'useQuery()'는 React Query를 이용해서 서버로부터 데이터를 조회해올 때 사용하는 Hook으로

DB로 따지자면 'Select' 문과 비슷하다고 할 수 있다.

 

const {isLoading, data} = useQuery("queryKey", queryFunction, options);

 

'useQuery' Hook은 기본적으로 두 개의 인자를 전달받는데

하나는 'queryKey', 다른 하나는 'query Function'이다.

 

---

① queryKey

 

queryKey는 useQuery마다 부여되는 고유한, Unique한 Key 값으로

아래 코드처럼 단순하게 문자열을 사용할 수도 있고 아니면 배열의 형태로 사용할 수도 있다.

 

const resp = useQuery("test", queryFunc);
const resp1 = useQuery(["test1"], queryFunc);

 

queryKey를 문자열로 작성한 경우에는 자동으로 길이가 1인 배열로 인식하기 때문에결과적으로 아래 이미지와 같이 배열에 문자열 하나만 집어넣은 것과 동일한 형태의 queryKey로 작성된다.

 

const coinID: string = "btc-bitCoin";

async function queryFunc(coinID: string){
    const resp = await fetch(`https://api.coinpaprika.com/v1/coins/${coinID}`);
    const json = await resp.json();
    
    return json;
}

const resp = useQuery(["Coin", coinID], () => queryFunc(coinID));

 

queryKey로 전달되는 배열에는 단순 문자열 외에도 위와 같이 변수를 집어넣을 수도 있다.

query Function이 인자가 필요한 경우에 이런 식으로 작성할 수 있다.

---

② query Function

 

promise 처리가 이루어지는 함수

 

---

📔 Reference
React Query의 useQuery에 대해 알아보기 / J4J Storage (tistory)

---

💻 Update Log
2024.08.03 임시 정리 내용 Backup