[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