📋 useQuery
useQuery는 get 요청을 하기 위해 보통 사용되는 hook이다.
첫번 째 파라미터로는 queryKey, 두번 째 파라미터는 비동기 함수(api를 호출할 함수)가 온다.
api를 호출한 함수는 promise를 반환한다.
api를 호출할 함수는 기본적으로 비동기로 작동한다.
url의 파라미터 값으로 리액트 쿼리를 작성해야 한다면 어떻게 해야할까?
찾아본 결과 useQuery의 추가 특징으로 해결할 수 있었다.
useQuery의 queryKey를 배열로 지정하면 배열의 첫 번째 값은 string 타입으로 쿼리의 고유 이름을 지정해주면 되고, 두 번째 값은 쿼리 함수의 파라미터로 전달할 값을 넣어주면 된다.
- 전달할 파라미터가 없는 경우
const coinInfo = useQuery("coinInfo", fetchQueryInfo);- 전달할 파라미터가 있는 경우
const coinInfo = useQuery(["coinInfo", coinId], () => fetchQueryInfo(coinId));하나의 컴포넌트 내부에서 여러개의 쿼리를 사용하면 동일한 키값을 사용해야 할 일이 있다.
당연히 중복된 이름의 변수 선언으로 인식되어 오류가 발생한다.
어떻게 하면 해결할 수 있을까?
구조분해할당 문법으로 키값의 이름을 고유값으로 설정해주면 된다.
// 코인 정보
const {isLoading : coinInfoLoading, data : coinInfo} = useQuery<CoinInfoItfc>(["coinInfo", coinId], () => fetchCoinInfo(coinId));
// 코인 가격 정보
const {isLoading : coinPriceInfoLoading, data : coinPriceInfo} = useQuery<CoinPriceInfoItfc>(["coinPriceInfo", coinId], () => fetchCoinPriceInfo(coinId));참고
